/* =========================================================
IWWIT – BICONIC Network Header v3
Fullscreen · freie BICONIC-Zone · mehr Personen-Icons
========================================================= */
.biconic-mesh {
--bi-pink: #d60270;
--bi-purple: #9b4f96;
--bi-blue: #0038a8;
position: relative;
width: 100%;
height: 100svh;
min-height: min(620px, 100svh);
max-height: 100svh;
box-sizing: border-box;
padding-bottom: 92px;
overflow: hidden;
isolation: isolate;
color: #fff;
background:
radial-gradient(circle at 23% 47%, rgba(214, 2, 112, .14), transparent 36%),
radial-gradient(circle at 77% 48%, rgba(0, 56, 168, .16), transparent 40%),
radial-gradient(circle at 50% 47%, rgba(155, 79, 150, .055), transparent 58%),
#030308;
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
"Barlow Semi Condensed",
Arial,
sans-serif
);
}
/* =========================================================
CANVAS
========================================================= */
.biconic-mesh__canvas {
position: absolute;
inset: 0;
z-index: 2;
display: block;
width: 100%;
height: 100%;
cursor: grab;
touch-action: pan-y;
}
.biconic-mesh.is-dragging .biconic-mesh__canvas {
cursor: grabbing;
}
/* =========================================================
STORY TEXT AROUND THE PARTICLE WORD
========================================================= */
.biconic-mesh__story {
position: absolute;
inset: 0;
z-index: 8;
pointer-events: none;
text-align: center;
}
.biconic-mesh__values {
position: absolute;
left: 50%;
top: 24.5%;
transform: translateX(-50%);
width: min(760px, calc(100% - 48px));
font-size: clamp(15px, 1.35vw, 22px);
font-weight: 400;
line-height: 1.2;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
text-shadow:
0 0 18px rgba(155,79,150,.14);
}
.biconic-mesh__values span {
display: inline-block;
margin: 0 .45em;
color: rgba(196,102,224,.85);
}
.biconic-mesh__claim {
position: absolute;
left: 50%;
top: 61.5%;
transform: translateX(-50%);
width: min(760px, calc(100% - 48px));
font-size: clamp(23px, 2.65vw, 44px);
line-height: 1.05;
font-weight: 300;
letter-spacing: .16em;
color: rgba(255,255,255,.90);
}
.biconic-mesh__claim strong {
font-weight: 600;
background:
linear-gradient(
90deg,
#ff2d8d,
#b850cb,
#287aff
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* =========================================================
NETWORK LAYERS
========================================================= */
.biconic-mesh__flags,
.biconic-mesh__people {
position: absolute;
inset: 0;
pointer-events: none;
}
.biconic-mesh__people {
z-index: 6;
}
.biconic-mesh__flags {
z-index: 10;
}
/* =========================================================
PERSONEN- / PROFIL-KNOTEN
Wichtig: zentrale BICONIC-Zone bleibt komplett frei.
========================================================= */
.mesh-person {
--person-size: 36px;
position: absolute;
width: var(--person-size);
height: var(--person-size);
display: grid;
place-items: center;
border-radius: 50%;
background:
rgba(7, 7, 17, .58);
border:
1px solid
rgba(255,255,255,.13);
box-shadow:
0 0 0 8px rgba(155,79,150,.022),
0 0 22px rgba(132,87,226,.11);
opacity: .70;
pointer-events: auto;
padding: 0;
margin: 0;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition:
transform .24s ease,
opacity .24s ease,
filter .24s ease,
box-shadow .24s ease,
border-color .24s ease;
}
.mesh-person img {
display: block;
width: 58%;
height: 58%;
object-fit: contain;
filter:
brightness(0)
invert(1);
opacity: .76;
}
.mesh-person__halo {
position: absolute;
inset: -8px;
border:
1px solid
rgba(173,100,239,.10);
border-radius: inherit;
}
.mesh-person:hover,
.mesh-person:focus-visible,
.mesh-person.is-hovered,
.mesh-person.is-locked {
z-index: 18;
opacity: 1;
transform:
translate(-2px, -2px)
scale(1.20);
border-color: rgba(255,255,255,.34);
background: rgba(10, 8, 25, .88);
box-shadow:
0 0 0 10px rgba(155,79,150,.055),
0 0 32px rgba(180,92,255,.42),
0 0 58px rgba(42,119,255,.16);
}
.mesh-person:hover img,
.mesh-person:focus-visible img,
.mesh-person.is-hovered img,
.mesh-person.is-locked img {
opacity: 1;
filter:
brightness(0)
invert(1)
drop-shadow(0 0 5px rgba(255,255,255,.50));
}
.mesh-person:hover .mesh-person__halo,
.mesh-person:focus-visible .mesh-person__halo,
.mesh-person.is-hovered .mesh-person__halo,
.mesh-person.is-locked .mesh-person__halo {
inset: -12px;
border-color: rgba(204,126,255,.30);
box-shadow: 0 0 24px rgba(175,85,255,.20);
}
.mesh-person:focus-visible {
outline: 2px solid rgba(255,255,255,.82);
outline-offset: 6px;
}
/*
* Desktop:
* Personen nur in den Rand-/Nebenbereichen.
*
* Freihaltezone für BICONIC:
* ungefähr x = 28–72 %, y = 29–61 %.
*/
.mesh-person--1 { left: 5%; top: 14%; }
.mesh-person--2 { left: 18%; top: 8%; }
.mesh-person--3 { left: 34%; top: 12%; }
.mesh-person--4 { left: 66%; top: 10%; }
.mesh-person--5 { left: 82%; top: 8%; }
.mesh-person--6 { left: 94%; top: 16%; }
.mesh-person--7 { left: 4%; top: 40%; }
.mesh-person--8 { left: 95%; top: 40%; }
.mesh-person--9 { left: 5%; top: 66%; }
.mesh-person--10 { left: 94%; top: 65%; }
.mesh-person--11 { left: 11%; top: 84%; }
.mesh-person--12 { left: 29%; top: 76%; }
.mesh-person--13 { left: 50%; top: 88%; }
.mesh-person--14 { left: 71%; top: 76%; }
.mesh-person--15 { left: 88%; top: 84%; }
/* =========================================================
FLAGGEN
========================================================= */
.mesh-flag {
--size: 46px;
position: absolute;
width: var(--size);
height: var(--size);
padding: 5px;
border: 0;
border-radius: 50%;
background:
rgba(7,7,17,.82);
box-shadow:
0 0 0 1px rgba(255,255,255,.20),
0 0 24px rgba(176,71,221,.15);
cursor: pointer;
pointer-events: auto;
transition:
transform .28s ease,
box-shadow .28s ease;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.mesh-flag img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.mesh-flag__ring {
position: absolute;
inset: -7px;
border:
1px solid
rgba(203,83,255,.28);
border-radius: inherit;
animation:
biconicPulse
2.8s
ease-out
infinite;
pointer-events: none;
}
@keyframes biconicPulse {
0% {
transform: scale(.72);
opacity: 0;
}
28% {
opacity: .60;
}
100% {
transform: scale(1.50);
opacity: 0;
}
}
@media (hover:hover) and (pointer:fine) {
.mesh-flag:hover {
transform: scale(1.15);
box-shadow:
0 0 0 2px rgba(255,255,255,.30),
0 0 38px rgba(220,63,226,.37);
}
}
.mesh-flag:focus-visible {
outline: 3px solid #fff;
outline-offset: 5px;
}
/*
* Flaggen ebenfalls deutlich aus der zentralen BICONIC-Zone.
* Vor allem Trans* und Lesbisch wurden weiter nach außen gesetzt.
*/
.mesh-flag--trans { left: 10%; top: 10%; }
.mesh-flag--lesbian { left: 86%; top: 11%; }
.mesh-flag--gay { left: 88%; top: 49%; }
.mesh-flag--pan { left: 70%; top: 76%; }
.mesh-flag--ace { left: 24%; top: 75%; }
.mesh-flag--queer { left: 8%; top: 48%; }
/* =========================================================
TOOLTIP
========================================================= */
.biconic-mesh__tooltip {
position: absolute;
z-index: 30;
width:
min(
340px,
calc(100% - 36px)
);
padding:
22px
48px
23px
22px;
border:
1px solid
rgba(255,255,255,.15);
border-radius: 15px;
background:
rgba(6,6,15,.90);
box-shadow:
0 25px 80px
rgba(0,0,0,.5);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
opacity: 0;
visibility: hidden;
transform:
translateY(10px)
scale(.96);
transition:
opacity .25s ease,
transform .3s ease,
visibility .25s ease;
}
.biconic-mesh__tooltip.is-visible {
opacity: 1;
visibility: visible;
transform:
translateY(0)
scale(1);
}
.biconic-mesh__tooltip-kicker {
display: block;
margin-bottom: 7px;
font-size: 9px;
font-weight: 600;
letter-spacing: .18em;
color: #dc4dca;
}
.biconic-mesh__tooltip-title {
display: block;
margin-bottom: 8px;
font-size: 26px;
line-height: 1;
}
.biconic-mesh__tooltip-text {
margin: 0;
font-size: 16px;
line-height: 1.4;
color:
rgba(255,255,255,.70);
}
.biconic-mesh__tooltip-close {
position: absolute;
right: 11px;
top: 11px;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background:
rgba(255,255,255,.08);
color: #fff;
font-size: 22px;
cursor: pointer;
}
/* =========================================================
NOSCRIPT
========================================================= */
.biconic-mesh__noscript {
position: absolute;
inset: 0;
z-index: 3;
display: grid;
place-items: center;
font-size:
clamp(
44px,
9vw,
140px
);
font-weight: 700;
}
/* =========================================================
BICONIC STICKY BEREICHSNAVIGATION
Direkt unten im Hero. Nach dem Hero bleibt sie sticky.
========================================================= */
.biconic-section-nav {
--biconic-nav-top: 12px;
--biconic-nav-bg: rgba(230, 231, 234, .90);
--biconic-nav-border: rgba(255,255,255,.72);
--biconic-nav-text: #3d4450;
--biconic-nav-hover: #111318;
--biconic-nav-shadow: 0 14px 40px rgba(0,0,0,.18);
position: absolute;
left: 50%;
bottom: 18px;
z-index: 40;
width: min(1180px, calc(100% - 48px));
max-width: calc(100vw - 24px);
transform: translateX(-50%);
border: 1px solid var(--biconic-nav-border);
border-radius: 999px;
background: var(--biconic-nav-bg);
box-shadow: var(--biconic-nav-shadow);
backdrop-filter: blur(16px) saturate(125%);
-webkit-backdrop-filter: blur(16px) saturate(125%);
color: var(--biconic-nav-text);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
"Barlow Semi Condensed",
Arial,
sans-serif
);
transition:
background-color .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
.biconic-section-nav.is-sticky {
position: fixed;
top: var(--biconic-nav-top);
bottom: auto;
z-index: 9997;
}
/* Sobald sie auf hellem Inhalt klebt, bleibt sie gut lesbar. */
.biconic-section-nav.is-sticky {
--biconic-nav-bg: rgba(247, 247, 249, .94);
--biconic-nav-border: rgba(25,29,36,.12);
--biconic-nav-shadow: 0 10px 34px rgba(17,20,28,.12);
}
body.pcdark-mode .biconic-section-nav,
html.pcdark-mode body .biconic-section-nav {
--biconic-nav-bg: rgba(31, 32, 37, .92);
--biconic-nav-border: rgba(255,255,255,.14);
--biconic-nav-text: #d7d9df;
--biconic-nav-hover: #ffffff;
--biconic-nav-shadow: 0 14px 42px rgba(0,0,0,.42);
}
.biconic-section-nav__scroller {
width: 100%;
min-width: 0;
display: flex;
align-items: center;
gap: 18px;
padding: 9px 18px 9px 22px;
box-sizing: border-box;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
scroll-snap-type: x proximity;
touch-action: pan-x;
}
.biconic-section-nav__scroller::-webkit-scrollbar {
display: none;
}
.biconic-section-nav__brand {
flex: 0 0 auto;
scroll-snap-align: start;
margin-right: clamp(4px, 2vw, 28px);
font-size: clamp(21px, 2vw, 31px);
line-height: 1;
font-weight: 700;
letter-spacing: -.035em;
text-decoration: none !important;
background: linear-gradient(90deg, #d60270, #9b4f96, #496ee8);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
}
.biconic-section-nav__links {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: clamp(18px, 2.5vw, 38px);
}
.biconic-section-nav__links a {
position: relative;
flex: 0 0 auto;
scroll-snap-align: center;
padding: 10px 0;
color: var(--biconic-nav-text) !important;
text-decoration: none !important;
font-family: inherit !important;
font-size: clamp(15px, 1.35vw, 20px) !important;
font-weight: 600 !important;
line-height: 1 !important;
transition: color .18s ease, opacity .18s ease;
}
.biconic-section-nav__links a:hover,
.biconic-section-nav__links a:focus-visible,
.biconic-section-nav__links a.is-active {
color: var(--biconic-nav-hover) !important;
}
.biconic-section-nav__links a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 3px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, #d60270, #9b4f96, #496ee8);
transform: scaleX(0);
transform-origin: center;
transition: transform .18s ease;
}
.biconic-section-nav__links a:hover::after,
.biconic-section-nav__links a:focus-visible::after,
.biconic-section-nav__links a.is-active::after {
transform: scaleX(1);
}
/* Ziele sollen beim Anklicken nicht unter der Sticky-Leiste verschwinden. */
#bi-plus,
#sichtbarkeit,
#stereotype,
#zahlen,
#geschichte,
#community,
#sprache,
#gesundheit,
#faq {
scroll-margin-top: 130px;
}
@media (max-width: 1020px) {
.biconic-section-nav {
width: calc(100% - 28px);
max-width: calc(100vw - 20px);
}
.biconic-section-nav__scroller {
gap: 14px;
padding: 8px 14px 8px 18px;
}
.biconic-section-nav__brand {
margin-right: 12px;
font-size: 23px;
}
.biconic-section-nav__links {
gap: 25px;
}
.biconic-section-nav__links a {
font-size: 16px !important;
}
}
@media (max-width: 760px) {
.biconic-section-nav {
left: 10px;
right: 10px;
bottom: 10px;
width: auto;
max-width: none;
transform: none;
border-radius: 22px;
}
.biconic-section-nav.is-sticky {
left: 8px;
right: 8px;
width: auto;
transform: none;
}
.biconic-section-nav__scroller {
padding: 8px 12px;
gap: 12px;
}
.biconic-section-nav__brand {
margin-right: 8px;
font-size: 20px;
}
.biconic-section-nav__links {
gap: 23px;
}
.biconic-section-nav__links a {
padding: 9px 0;
font-size: 15px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.biconic-mesh {
height: 100svh;
min-height: min(560px, 100svh);
max-height: 100svh;
padding-bottom: 78px;
}
.biconic-mesh__values {
top: 22%;
width:
calc(100% - 36px);
font-size:
clamp(
11px,
3.35vw,
15px
);
line-height: 1.35;
letter-spacing: .095em;
}
.biconic-mesh__values span {
margin:
0
.20em;
}
.biconic-mesh__claim {
top: 59%;
width:
calc(100% - 36px);
font-size:
clamp(
20px,
6.2vw,
27px
);
line-height: 1.2;
letter-spacing: .065em;
}
.mesh-flag {
--size: 36px;
padding: 4px;
}
/* mobile BICONIC-Zone ca. x 8–92 %, y 31–58 % */
.mesh-flag--trans { left: 4%; top: 8%; }
.mesh-flag--lesbian { left: 84%; top: 10%; }
.mesh-flag--gay { left: 86%; top: 62%; }
.mesh-flag--pan { left: 68%; top: 78%; }
.mesh-flag--ace { left: 13%; top: 78%; }
.mesh-flag--queer { left: 2%; top: 61%; }
.mesh-person {
--person-size: 34px;
opacity: .78;
}
/* Mobile: 15 Perspektiv-Knoten ruhiger und gleichmäßiger verteilt */
.mesh-person--1 { left: 7%; top: 8%; }
.mesh-person--2 { left: 29%; top: 6%; }
.mesh-person--3 { left: 71%; top: 6%; }
.mesh-person--4 { left: 91%; top: 10%; }
.mesh-person--5 { left: 6%; top: 29%; }
.mesh-person--6 { left: 92%; top: 30%; }
.mesh-person--7 { left: 5%; top: 51%; }
.mesh-person--8 { left: 93%; top: 51%; }
.mesh-person--9 { left: 7%; top: 70%; }
.mesh-person--10 { left: 91%; top: 70%; }
.mesh-person--11 { left: 12%; top: 86%; }
.mesh-person--12 { left: 31%; top: 80%; }
.mesh-person--13 { left: 50%; top: 90%; }
.mesh-person--14 { left: 69%; top: 80%; }
.mesh-person--15 { left: 88%; top: 86%; }
.biconic-mesh__tooltip {
left: 16px !important;
right: 16px !important;
top: auto !important;
bottom: 20px !important;
width: auto;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
.mesh-person {
--person-size: 30px;
}
.mesh-flag {
--size: 34px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.biconic-mesh *,
.biconic-mesh *::before,
.biconic-mesh *::after {
animation: none !important;
transition: none !important;
}
}
/* =========================================================
SECTION 01 · WAS BEDEUTET BI+? · v7
Bild links · Inhalt rechts · Parallax
========================================================= */
.biconic-info {
--font-family: 'Barlow Semi Condensed', Arial, sans-serif;
--bg-color: #f5f5f7;
--card-bg: #ffffff;
--primary-color: #2c3e50;
--accent-color: #5084ab;
--text-main: #333333;
--text-muted: #666666;
--border-color: #eeeeee;
--quote-bg: #f9f9f9;
--bi-pink: #d60270;
--bi-purple: #9b4f96;
--bi-blue: #0038a8;
--info-progress: 0;
--image-shift: 0px;
--content-shift: 0px;
--image-y: 0px;
position: relative;
width: 100%;
overflow: clip;
background: var(--bg-color);
color: var(--text-main);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
var(--font-family)
);
transition:
background-color .3s ease,
color .3s ease;
}
/* Darkmode – passend zum vorhandenen IWWIT-System */
body.pcdark-mode .biconic-info,
html.pcdark-mode body .biconic-info {
--bg-color: #000000;
--card-bg: #1c1c1e;
--primary-color: #ffffff;
--text-main: #e1e1e1;
--text-muted: #a1a1a6;
--border-color: #333333;
--quote-bg: #2c2c2e;
}
/* weicher Übergang vom dunklen BICONIC-Hero in die Inhaltsfläche */
.biconic-info::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 110px;
pointer-events: none;
z-index: 0;
background: linear-gradient(
to bottom,
rgba(3,3,8,.10) 0%,
rgba(3,3,8,.03) 42%,
rgba(3,3,8,0) 100%
);
}
body.pcdark-mode .biconic-info::before,
html.pcdark-mode body .biconic-info::before {
height: 160px;
opacity: 1;
background: linear-gradient(
to bottom,
rgba(3,3,8,1) 0%,
rgba(3,3,8,.52) 36%,
rgba(3,3,8,0) 100%
);
}
.biconic-info__inner {
position: relative;
z-index: 1;
width:
min(
1180px,
calc(100% - 56px)
);
margin: 0 auto;
padding:
clamp(90px, 11vw, 160px)
0
clamp(96px, 11vw, 160px);
display: grid;
grid-template-columns:
minmax(0, .95fr)
minmax(0, 1.05fr);
gap:
clamp(
52px,
7vw,
110px
);
align-items: start;
}
/* =========================================================
IMAGE SIDE
========================================================= */
.biconic-info__media-wrap {
position: relative;
min-width: 0;
/*
* Desktop: Bild bleibt eine Weile stehen,
* während der Text rechts vorbeiläuft.
*/
position: sticky;
top: clamp(92px, 12vh, 140px);
transform:
translate3d(
var(--image-shift),
var(--image-y),
0
);
opacity:
clamp(
0,
calc(
.25 +
var(--info-progress) * .95
),
1
);
will-change:
transform,
opacity;
}
.biconic-info__media {
margin: 0;
}
.biconic-info__image-stage {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius:
clamp(
18px,
2.4vw,
32px
);
background: var(--card-bg);
border:
1px solid
color-mix(
in srgb,
var(--border-color) 82%,
transparent
);
box-shadow:
0 28px 70px
rgba(0,0,0,.13);
isolation: isolate;
}
body.pcdark-mode .biconic-info__image-stage,
html.pcdark-mode body .biconic-info__image-stage {
box-shadow:
0 30px 80px
rgba(0,0,0,.50);
}
.biconic-info__image {
position: absolute;
left: -3%;
top: -8%;
width: 106%;
height: 116%;
max-width: none !important;
object-fit: cover;
object-position: center center;
transform:
translate3d(
0,
calc(var(--image-y) * -.65),
0
)
scale(1.035);
will-change: transform;
}
.biconic-info__image-stage::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
to top,
rgba(2,2,8,.18),
transparent 44%
);
}
.biconic-info__image-glow {
position: absolute;
z-index: 3;
left: -28%;
bottom: -20%;
width: 74%;
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(214,2,112,.26),
rgba(155,79,150,.13) 42%,
transparent 70%
);
filter: blur(20px);
pointer-events: none;
transform:
translate3d(
calc(var(--info-progress) * 30px),
calc(var(--info-progress) * -16px),
0
);
}
.biconic-info__caption {
margin-top: 15px;
max-width: 460px;
color: var(--text-muted);
font-size: 13px;
line-height: 1.4;
letter-spacing: .025em;
}
/* =========================================================
CONTENT SIDE
========================================================= */
.biconic-info__content {
min-width: 0;
padding-top:
clamp(
14px,
4vh,
42px
);
transform:
translate3d(
var(--content-shift),
0,
0
);
opacity:
clamp(
0,
calc(
.18 +
var(--info-progress) * 1.05
),
1
);
will-change:
transform,
opacity;
}
.biconic-info__kicker {
margin:
0
0
16px !important;
max-width: none !important;
color: var(--accent-color) !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: .18em;
text-transform: uppercase;
}
.biconic-info__title {
margin:
0
0
34px !important;
max-width: 720px !important;
color: var(--primary-color) !important;
font-family: inherit !important;
font-size:
clamp(
44px,
5vw,
78px
) !important;
font-weight: 600 !important;
line-height: .96 !important;
letter-spacing: -.035em !important;
}
.biconic-info__title span {
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
#287aff
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.biconic-info__text {
max-width: 690px;
}
.biconic-info__text p {
margin:
0
0
1.35em !important;
max-width: none !important;
color: var(--text-main) !important;
font-family: inherit !important;
font-size:
clamp(
18px,
1.45vw,
22px
) !important;
font-weight: 400 !important;
line-height: 1.58 !important;
}
.biconic-info__text p:last-child {
margin-bottom: 0 !important;
}
.biconic-info__lead {
font-size:
clamp(
20px,
1.7vw,
25px
) !important;
line-height: 1.5 !important;
}
.biconic-info__text strong {
color: var(--primary-color);
font-weight: 600;
}
.biconic-info__text em {
color: var(--primary-color);
}
/* =========================================================
QUOTE
========================================================= */
.biconic-info__quote-wrap {
position: relative;
margin:
clamp(
38px,
5vw,
60px
)
0;
padding:
clamp(
26px,
3vw,
36px
)
0
clamp(
26px,
3vw,
36px
)
clamp(
24px,
3vw,
38px
);
border-left:
3px solid
var(--bi-purple);
background:
linear-gradient(
90deg,
color-mix(
in srgb,
var(--quote-bg) 92%,
var(--bi-purple) 8%
),
transparent
);
}
.biconic-info__quote-label {
margin:
0
0
13px !important;
color: var(--text-muted) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: .12em;
text-transform: uppercase;
}
.biconic-info__quote {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
color: var(--primary-color);
font-family: inherit;
font-size:
clamp(
20px,
1.65vw,
25px
);
font-weight: 400;
font-style: italic;
line-height: 1.48;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 920px) {
.biconic-info__inner {
width:
min(
100% - 36px,
780px
);
grid-template-columns:
minmax(0, .90fr)
minmax(0, 1.10fr);
gap:
clamp(
30px,
5vw,
48px
);
padding-top: 100px;
}
.biconic-info__media-wrap {
top: 92px;
}
.biconic-info__title {
font-size:
clamp(
38px,
6vw,
58px
) !important;
}
}
/* =========================================================
MOBILE
Bild zuerst, Text direkt darunter.
Beide Elemente behalten ihren Scroll-Parallax.
========================================================= */
@media (max-width: 760px) {
.biconic-info {
overflow: hidden;
}
.biconic-info::before {
height: 110px;
}
.biconic-info__inner {
width:
calc(
100% - 28px
);
padding:
76px
0
88px;
display: block;
}
.biconic-info__media-wrap {
position: relative;
top: auto;
width: 100%;
margin-bottom:
clamp(
42px,
12vw,
64px
);
transform:
translate3d(
var(--image-shift),
calc(var(--image-y) * .32),
0
);
}
.biconic-info__image-stage {
aspect-ratio: 4 / 4.65;
border-radius: 22px;
}
.biconic-info__image {
left: -4%;
top: -10%;
width: 108%;
height: 120%;
transform:
translate3d(
0,
calc(var(--image-y) * -.45),
0
)
scale(1.04);
}
.biconic-info__caption {
margin-top: 12px;
font-size: 12px;
}
.biconic-info__content {
padding-top: 0;
transform:
translate3d(
var(--content-shift),
0,
0
);
}
.biconic-info__kicker {
margin-bottom: 12px !important;
font-size: 10px !important;
}
.biconic-info__title {
margin-bottom: 26px !important;
font-size:
clamp(
40px,
13vw,
58px
) !important;
line-height: .98 !important;
}
.biconic-info__text p {
font-size: 17px !important;
line-height: 1.55 !important;
}
.biconic-info__lead {
font-size: 19px !important;
}
.biconic-info__quote-wrap {
margin: 34px 0;
padding:
22px
4px
22px
22px;
}
.biconic-info__quote {
font-size: 18px;
line-height: 1.5;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.biconic-info {
--info-progress: 1 !important;
--image-shift: 0px !important;
--content-shift: 0px !important;
--image-y: 0px !important;
}
.biconic-info__media-wrap,
.biconic-info__content,
.biconic-info__image,
.biconic-info__image-glow {
transform: none !important;
opacity: 1 !important;
transition: none !important;
}
}
/* =========================================================
v8 · LIGHT-/DARKMODE FEINSCHLIFF
========================================================= */
.biconic-info {
background:
linear-gradient(
180deg,
#ffffff 0%,
var(--bg-color) 22%,
var(--bg-color) 100%
);
}
body.pcdark-mode .biconic-info,
html.pcdark-mode body .biconic-info {
background: #000000;
}
.biconic-info__content {
order: 1;
}
.biconic-info__media-wrap {
order: 2;
}
@media (max-width: 760px) {
.biconic-info__content {
order: 2;
margin-top: 46px;
}
.biconic-info__media-wrap {
order: 1;
margin-bottom: 0;
}
}
/* =========================================================
BICONIC BEREICHSNAVIGATION · v11
- beim Aufruf direkt unten im Hero sichtbar
- beim Scrollen sticky ganz oben unter dem globalen Header
- kompakter, dünnere Schrift, kleinere Abstände
- Light/Dark transparent
- Mobile: einzeilig, swipebar, letztes sichtbares Wort halb sichtbar
========================================================= */
/* Der Hero darf zusammen mit dem globalen Header nie höher als der Screen sein. */
.biconic-mesh {
height: var(--biconic-hero-height, calc(100svh - 82px)) !important;
min-height: var(--biconic-hero-height, calc(100svh - 82px)) !important;
max-height: var(--biconic-hero-height, calc(100svh - 82px)) !important;
padding-bottom: 68px !important;
box-sizing: border-box !important;
}
/* Initial: wirklich unten im Hero. */
.biconic-section-nav {
--biconic-nav-top: 8px;
--biconic-nav-bg: rgba(247, 247, 249, .76);
--biconic-nav-border: rgba(20, 24, 31, .12);
--biconic-nav-text: #343a46;
--biconic-nav-hover: #111318;
--biconic-nav-shadow: 0 9px 28px rgba(0,0,0,.10);
position: absolute !important;
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: 12px !important;
z-index: 70 !important;
width: min(1140px, calc(100% - 34px)) !important;
max-width: calc(100vw - 18px) !important;
min-height: 46px !important;
transform: translateX(-50%) !important;
border: 1px solid var(--biconic-nav-border) !important;
border-radius: 999px !important;
background: var(--biconic-nav-bg) !important;
box-shadow: var(--biconic-nav-shadow) !important;
-webkit-backdrop-filter: blur(13px) saturate(122%) !important;
backdrop-filter: blur(13px) saturate(122%) !important;
overflow: hidden !important;
}
/* Sticky-Zustand: ganz oben unter dem normalen IWWIT-Header. */
.biconic-section-nav.is-sticky {
position: fixed !important;
left: 50% !important;
right: auto !important;
top: var(--biconic-nav-top) !important;
bottom: auto !important;
z-index: 9997 !important;
transform: translateX(-50%) !important;
}
body.pcdark-mode .biconic-section-nav,
html.pcdark-mode body .biconic-section-nav {
--biconic-nav-bg: rgba(18, 18, 24, .70);
--biconic-nav-border: rgba(255,255,255,.13);
--biconic-nav-text: #d9dbe1;
--biconic-nav-hover: #ffffff;
--biconic-nav-shadow: 0 10px 30px rgba(0,0,0,.34);
}
.biconic-section-nav__scroller {
width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 5px 12px !important;
box-sizing: border-box !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
touch-action: pan-x !important;
scrollbar-width: none !important;
scroll-snap-type: none !important;
}
.biconic-section-nav__scroller::-webkit-scrollbar {
display: none !important;
}
.biconic-section-nav__brand {
flex: 0 0 auto !important;
margin-right: 10px !important;
padding: 5px 5px !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: -.025em !important;
}
.biconic-section-nav__links {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
gap: clamp(12px, 1.5vw, 21px) !important;
}
.biconic-section-nav__links a {
flex: 0 0 auto !important;
padding: 7px 0 !important;
color: var(--biconic-nav-text) !important;
font-size: clamp(13px, 1.08vw, 15px) !important;
font-weight: 400 !important;
line-height: 1 !important;
letter-spacing: .005em !important;
}
.biconic-section-nav__links a::after {
bottom: 2px !important;
height: 1px !important;
}
/* Erste Sektion beginnt normal direkt nach dem Hero – ohne Nav-Sonderabstand. */
#bi-plus {
scroll-margin-top: 0 !important;
}
/* Alle späteren Ziele dürfen beim Anklicken unter der Sticky-Leiste Platz haben. */
#sichtbarkeit,
#stereotype,
#zahlen,
#geschichte,
#community,
#sprache,
#gesundheit,
#faq {
scroll-margin-top: 96px !important;
}
@media (max-width: 900px) {
.biconic-mesh {
padding-bottom: 60px !important;
}
.biconic-section-nav {
width: calc(100% - 18px) !important;
max-width: none !important;
min-height: 42px !important;
bottom: 8px !important;
border-radius: 22px !important;
}
.biconic-section-nav.is-sticky {
left: 9px !important;
right: 9px !important;
width: auto !important;
transform: none !important;
}
.biconic-section-nav__scroller {
min-height: 40px !important;
gap: 5px !important;
padding: 4px 9px !important;
}
.biconic-section-nav__brand {
margin-right: 7px !important;
padding: 4px 3px !important;
font-size: 16px !important;
}
.biconic-section-nav__links {
gap: 14px !important;
}
.biconic-section-nav__links a {
padding: 6px 0 !important;
font-size: 13px !important;
font-weight: 400 !important;
}
/* dezenter Swipe-Hinweis am rechten Rand */
.biconic-section-nav::after {
content: "";
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
width: 34px;
z-index: 3;
pointer-events: none;
border-radius: 0 22px 22px 0;
background: linear-gradient(90deg, rgba(247,247,249,0), rgba(247,247,249,.70));
}
body.pcdark-mode .biconic-section-nav::after,
html.pcdark-mode body .biconic-section-nav::after {
background: linear-gradient(90deg, rgba(18,18,24,0), rgba(18,18,24,.64));
}
}
@media (max-width: 560px) {
.biconic-section-nav {
width: calc(100% - 12px) !important;
min-height: 40px !important;
bottom: 6px !important;
}
.biconic-section-nav.is-sticky {
left: 6px !important;
right: 6px !important;
}
.biconic-section-nav__scroller {
min-height: 38px !important;
padding: 3px 8px !important;
}
.biconic-section-nav__brand {
font-size: 15px !important;
}
.biconic-section-nav__links {
gap: 12px !important;
}
.biconic-section-nav__links a {
font-size: 12.5px !important;
}
}
/* =========================================================
BICONIC NAV · v12 FINAL FIX
1) Hero passt komplett in den sichtbaren Screen
2) Navigation ist unten vollständig sichtbar
3) Sticky-Navigation liegt garantiert über allen Sektionen
========================================================= */
.biconic-mesh {
height: var(--biconic-hero-height, 100svh) !important;
min-height: 0 !important;
max-height: var(--biconic-hero-height, 100svh) !important;
box-sizing: border-box !important;
/*
* Platz für die unten liegende Navigation.
* Dadurch kollidiert der Hero-Inhalt nicht mit der Leiste.
*/
padding-bottom: 72px !important;
overflow: hidden !important;
}
/* Navigation im Hero: vollständig innerhalb der sichtbaren Fläche */
.biconic-mesh > .biconic-section-nav,
.biconic-section-nav {
left: 50% !important;
right: auto !important;
bottom: 12px !important;
top: auto !important;
width: min(1160px, calc(100vw - 32px)) !important;
max-width: calc(100vw - 32px) !important;
min-height: 46px !important;
transform: translateX(-50%) !important;
z-index: 2147483000 !important;
isolation: isolate !important;
}
/* Sticky-Zustand: wird per JS direkt an gehängt */
body > .biconic-section-nav.is-sticky,
.biconic-section-nav.is-sticky {
position: fixed !important;
left: 50% !important;
right: auto !important;
top: var(--biconic-nav-top, 0px) !important;
bottom: auto !important;
transform: translateX(-50%) !important;
z-index: 2147483000 !important;
/*
* Eigene Compositing-Ebene:
* verhindert, dass nachfolgende Sektionen über der Navigation liegen.
*/
transform-origin: center top !important;
will-change: transform !important;
}
/* Erste und weitere Sektionen bleiben bewusst unter der Navigation */
.biconic-info,
[data-biconic-info],
#bi-plus,
#sichtbarkeit,
#stereotype,
#zahlen,
#geschichte,
#community,
#sprache,
#gesundheit,
#faq {
position: relative;
z-index: 1 !important;
}
/* Kompakte Navigation */
.biconic-section-nav__scroller {
min-height: 44px !important;
gap: 8px !important;
padding: 5px 12px 5px 15px !important;
}
.biconic-section-nav__brand {
margin-right: 6px !important;
font-size: 18px !important;
font-weight: 500 !important;
}
.biconic-section-nav__links {
gap: 18px !important;
}
.biconic-section-nav__links a {
padding: 8px 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
}
/* Tablet */
@media (max-width: 1020px) {
.biconic-mesh {
padding-bottom: 66px !important;
}
.biconic-section-nav {
width: calc(100vw - 20px) !important;
max-width: calc(100vw - 20px) !important;
}
.biconic-section-nav__scroller {
gap: 6px !important;
padding: 5px 10px 5px 12px !important;
}
.biconic-section-nav__brand {
margin-right: 4px !important;
font-size: 16px !important;
}
.biconic-section-nav__links {
gap: 15px !important;
}
.biconic-section-nav__links a {
font-size: 13px !important;
}
}
/* Mobile: bestehendes horizontales Swipe-Verhalten beibehalten */
@media (max-width: 760px) {
.biconic-mesh {
height: var(--biconic-hero-height, 100svh) !important;
min-height: 0 !important;
max-height: var(--biconic-hero-height, 100svh) !important;
padding-bottom: 60px !important;
}
.biconic-mesh > .biconic-section-nav,
.biconic-section-nav,
body > .biconic-section-nav.is-sticky {
left: 8px !important;
right: 8px !important;
width: auto !important;
max-width: none !important;
transform: none !important;
}
.biconic-section-nav {
bottom: 8px !important;
}
body > .biconic-section-nav.is-sticky,
.biconic-section-nav.is-sticky {
bottom: auto !important;
}
.biconic-section-nav__scroller {
min-height: 40px !important;
padding: 4px 10px !important;
gap: 5px !important;
}
.biconic-section-nav__brand {
margin-right: 3px !important;
font-size: 15px !important;
}
.biconic-section-nav__links {
gap: 14px !important;
}
.biconic-section-nav__links a {
padding: 7px 0 !important;
font-size: 12px !important;
font-weight: 400 !important;
}
}
/* =========================================================
SECTION 01 · BI+ · v14
Smooth Parallax + Bild zuerst auf Tablet/Mobile
========================================================= */
.biconic-info {
--image-shift-smooth: 0px;
--content-shift-smooth: 0px;
--image-y-smooth: 0px;
}
.biconic-info__media-wrap {
transform:
translate3d(
var(--image-shift-smooth),
var(--image-y-smooth),
0
) !important;
will-change: transform, opacity !important;
}
.biconic-info__content {
transform:
translate3d(
var(--content-shift-smooth),
0,
0
) !important;
will-change: transform, opacity !important;
}
.biconic-info__image {
transform:
translate3d(
0,
calc(var(--image-y-smooth) * -.5),
0
)
scale(1.025) !important;
will-change: transform !important;
}
/* Tablet: Bild oben, Text direkt darunter */
@media (max-width: 980px) {
.biconic-info__inner {
width: min(100% - 36px, 860px) !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding-top: 90px !important;
padding-bottom: 108px !important;
}
.biconic-info__media-wrap {
order: 1 !important;
position: relative !important;
top: auto !important;
width: min(100%, 760px) !important;
margin: 0 auto 32px !important;
}
.biconic-info__content {
order: 2 !important;
width: min(100%, 760px) !important;
margin: 0 auto !important;
padding-top: 0 !important;
}
.biconic-info__image-stage {
aspect-ratio: 16 / 10 !important;
}
.biconic-info__image {
left: -2% !important;
top: -11% !important;
width: 104% !important;
height: 122% !important;
transform:
translate3d(
0,
calc(var(--image-y-smooth) * -.32),
0
)
scale(1.018) !important;
}
.biconic-info__caption {
margin-top: 9px !important;
}
}
/* Smartphone: kompakt, Bild zuerst, kein großer Leerraum */
@media (max-width: 760px) {
.biconic-info__inner {
width: calc(100% - 28px) !important;
padding: 70px 0 86px !important;
}
.biconic-info__media-wrap {
width: 100% !important;
margin-bottom: 24px !important;
}
.biconic-info__image-stage {
aspect-ratio: 4 / 3.2 !important;
border-radius: 20px !important;
}
.biconic-info__image {
left: -3% !important;
top: -12% !important;
width: 106% !important;
height: 124% !important;
transform:
translate3d(
0,
calc(var(--image-y-smooth) * -.24),
0
)
scale(1.012) !important;
}
.biconic-info__caption {
margin-top: 8px !important;
font-size: 11px !important;
}
.biconic-info__title {
margin-bottom: 22px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.biconic-info {
--image-shift-smooth: 0px !important;
--content-shift-smooth: 0px !important;
--image-y-smooth: 0px !important;
}
.biconic-info__media-wrap,
.biconic-info__content,
.biconic-info__image {
transform: none !important;
opacity: 1 !important;
}
}
/* =========================================================
SECTION 01 · BI+ · v15
Deutlich sichtbarer Scroll-Parallax
========================================================= */
/*
* Der Effekt soll sichtbar sein:
* Text kommt von links, Bild von rechts.
* Trotzdem bleibt die Bewegung weich.
*/
.biconic-info__media-wrap,
.biconic-info__content {
will-change: transform, opacity !important;
}
/* TABLET: Bild 3:2 */
@media (max-width: 980px) {
.biconic-info__image-stage {
aspect-ratio: 3 / 2 !important;
}
.biconic-info__media-wrap {
margin-bottom: 28px !important;
}
}
/* MOBILE: ebenfalls 3:2 */
@media (max-width: 760px) {
.biconic-info__image-stage {
aspect-ratio: 3 / 2 !important;
}
.biconic-info__media-wrap {
margin-bottom: 22px !important;
}
}
/* =========================================================
SECTION 02 · SICHTBARKEIT / BI-ERASURE · v19
Sichtbarer Scroll-Effekt + 2-spaltige Cards + Mobile Visual
========================================================= */
.biconic-erasure {
--font-family: 'Barlow Semi Condensed', Arial, sans-serif;
--bg-color: #f5f5f7;
--card-bg: #ffffff;
--primary-color: #2c3e50;
--accent-color: #5084ab;
--text-main: #333333;
--text-muted: #666666;
--border-color: #e7e7ea;
--bi-pink: #d60270;
--bi-purple: #9b4f96;
--bi-blue: #315bd8;
--erasure-progress: 0;
position: relative;
z-index: 1;
width: 100%;
overflow: clip;
background:
linear-gradient(
180deg,
#ffffff 0%,
var(--bg-color) 16%,
var(--bg-color) 84%,
#ffffff 100%
);
color: var(--text-main);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
var(--font-family)
);
}
body.pcdark-mode .biconic-erasure,
html.pcdark-mode body .biconic-erasure {
--bg-color: #000000;
--card-bg: #1c1c1e;
--primary-color: #ffffff;
--text-main: #e1e1e1;
--text-muted: #a1a1a6;
--border-color: #303034;
background:
linear-gradient(
180deg,
#000000 0%,
#07070a 16%,
#07070a 84%,
#000000 100%
);
}
.biconic-erasure__inner {
width: min(1180px, calc(100% - 56px));
margin: 0 auto;
padding:
clamp(90px, 9vw, 138px)
0
clamp(100px, 11vw, 150px);
}
/* =========================================================
INTRO + VISUAL
========================================================= */
.biconic-erasure__intro-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
gap: clamp(38px, 6vw, 86px);
align-items: center;
margin-bottom: clamp(54px, 7vw, 84px);
}
.biconic-erasure__intro {
min-width: 0;
}
.biconic-erasure__kicker {
margin: 0 0 14px !important;
color: var(--accent-color) !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .18em;
text-transform: uppercase;
}
.biconic-erasure__title {
margin: 0 0 24px !important;
max-width: 720px !important;
color: var(--primary-color) !important;
font-family: inherit !important;
font-size: clamp(44px, 4.9vw, 72px) !important;
font-weight: 600 !important;
line-height: .98 !important;
letter-spacing: -.04em !important;
}
.biconic-erasure__title span {
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.biconic-erasure__lead {
margin: 0 !important;
max-width: 680px !important;
color: var(--text-main) !important;
font-size: clamp(19px, 1.55vw, 23px) !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
/* visual beside heading */
.biconic-erasure__visual {
min-width: 0;
}
.biconic-erasure__visual-inner {
position: relative;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(24px, 2.7vw, 34px);
border: 1px solid var(--border-color);
border-radius: clamp(22px, 2.5vw, 30px);
background:
color-mix(
in srgb,
var(--card-bg) 90%,
transparent
);
box-shadow:
0 16px 42px
rgba(0,0,0,.055);
transform: none;
will-change: transform;
}
body.pcdark-mode .biconic-erasure__visual-inner,
html.pcdark-mode body .biconic-erasure__visual-inner {
box-shadow: 0 22px 54px rgba(0,0,0,.28);
}
.biconic-erasure__visual-label {
margin-bottom: 14px;
color: var(--text-muted);
font-size: 11px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
}
.biconic-erasure__visual-word {
width: max-content;
margin-bottom: 16px;
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: clamp(72px, 7.2vw, 116px);
font-weight: 600;
line-height: .82;
letter-spacing: -.07em;
transform: none;
will-change: transform;
}
.biconic-erasure__visual-claim {
margin: 0 !important;
color: var(--primary-color) !important;
font-size: clamp(18px, 1.45vw, 21px) !important;
font-weight: 500 !important;
line-height: 1.22 !important;
}
.biconic-erasure__visual-track {
position: absolute;
left: clamp(24px, 2.7vw, 34px);
right: clamp(24px, 2.7vw, 34px);
bottom: clamp(20px, 2.3vw, 28px);
height: 2px;
overflow: hidden;
background: var(--border-color);
}
.biconic-erasure.is-animated .biconic-erasure__visual-inner {
transform:
translate3d(
calc((.5 - var(--erasure-progress)) * 54px),
calc((.5 - var(--erasure-progress)) * 20px),
0
);
}
.biconic-erasure.is-animated .biconic-erasure__visual-word {
transform:
translate3d(
calc((.5 - var(--erasure-progress)) * 34px),
0,
0
);
}
.biconic-erasure__visual-track span {
display: block;
width: 100%;
height: 100%;
transform: scaleX(var(--erasure-progress));
transform-origin: left center;
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
}
/* =========================================================
CARDS: DESKTOP + TABLET = TWO COLUMNS
========================================================= */
.biconic-erasure__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:
clamp(22px, 3vw, 34px)
clamp(24px, 3.5vw, 40px);
align-items: start;
}
.biconic-erasure__card {
--card-progress: 0;
--card-direction: 1;
position: relative;
width: 100%;
margin: 0;
padding:
clamp(22px, 2.4vw, 28px)
clamp(22px, 2.6vw, 30px)
clamp(24px, 2.5vw, 30px)
clamp(54px, 4.8vw, 66px);
border: 1px solid var(--border-color);
border-radius: clamp(18px, 2vw, 24px);
background: var(--card-bg);
box-shadow:
0 14px 34px
rgba(0,0,0,.05);
opacity: 1;
transform: none;
will-change: transform, opacity;
}
.biconic-erasure__card--left {
--card-direction: -1;
}
.biconic-erasure__card--right {
--card-direction: 1;
}
/*
* Progressive enhancement:
* Ohne JavaScript bleiben alle Inhalte vollständig sichtbar.
* Erst JS setzt .is-animated und aktiviert Startposition + Scrollbewegung.
*/
.biconic-erasure.is-animated .biconic-erasure__card {
opacity:
calc(
.10 +
var(--card-progress) * .90
);
transform:
translate3d(
calc(
var(--card-direction) *
(1 - var(--card-progress)) *
190px
),
calc(
(1 - var(--card-progress)) *
24px
),
0
)
scale(
calc(
.965 +
var(--card-progress) * .035
)
);
}
body.pcdark-mode .biconic-erasure__card,
html.pcdark-mode body .biconic-erasure__card {
box-shadow: 0 16px 38px rgba(0,0,0,.26);
}
.biconic-erasure__index {
position: absolute;
left: 20px;
top: 25px;
color: var(--text-muted);
font-size: 10px;
font-weight: 500;
letter-spacing: .13em;
}
.biconic-erasure__card h3 {
margin: 0 0 11px !important;
color: var(--primary-color) !important;
font-family: inherit !important;
font-size: clamp(23px, 2.15vw, 31px) !important;
font-weight: 600 !important;
line-height: 1.05 !important;
letter-spacing: -.025em !important;
}
.biconic-erasure__card p {
margin: 0 0 .82em !important;
max-width: none !important;
color: var(--text-main) !important;
font-family: inherit !important;
font-size: clamp(15px, 1.15vw, 18px) !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
.biconic-erasure__card p:last-child {
margin-bottom: 0 !important;
}
.biconic-erasure__card em {
color: var(--primary-color);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 980px) {
.biconic-erasure__inner {
width: min(100% - 36px, 900px);
}
.biconic-erasure__intro-grid {
grid-template-columns: minmax(0, 1fr) minmax(240px, .78fr);
gap: 28px;
}
.biconic-erasure__visual-inner {
min-height: 240px;
}
.biconic-erasure__visual-word {
font-size: clamp(64px, 9vw, 96px);
}
.biconic-erasure__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.biconic-erasure.is-animated .biconic-erasure__card {
transform:
translate3d(
calc(
var(--card-direction) *
(1 - var(--card-progress)) *
140px
),
calc(
(1 - var(--card-progress)) *
20px
),
0
)
scale(
calc(
.97 +
var(--card-progress) * .03
)
);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.biconic-erasure {
overflow: hidden;
}
.biconic-erasure__inner {
width: calc(100% - 28px);
padding:
72px
0
86px;
}
.biconic-erasure__intro-grid {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 34px;
}
.biconic-erasure__intro {
order: 1;
}
.biconic-erasure__visual {
order: 2;
}
.biconic-erasure__title {
font-size:
clamp(
36px,
10.5vw,
50px
) !important;
}
.biconic-erasure__lead {
font-size: 18px !important;
}
/*
* Mobile Visual:
* deutlich flacher, horizontaler und nicht mehr wie eine riesige Box.
*/
.biconic-erasure__visual-inner {
min-height: 0;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 18px;
row-gap: 5px;
align-items: center;
padding:
18px
20px
20px;
border-radius: 18px;
transform: none;
}
.biconic-erasure__visual-label {
grid-column: 1 / -1;
margin: 0 0 4px;
}
.biconic-erasure__visual-word {
grid-column: 1;
grid-row: 2;
margin: 0;
font-size: clamp(62px, 21vw, 88px);
transform: none;
}
.biconic-erasure__visual-claim {
grid-column: 2;
grid-row: 2;
font-size: 17px !important;
line-height: 1.18 !important;
}
.biconic-erasure.is-animated .biconic-erasure__visual-inner {
transform:
translate3d(
calc((.5 - var(--erasure-progress)) * 32px),
0,
0
);
}
.biconic-erasure.is-animated .biconic-erasure__visual-word {
transform:
translate3d(
calc((.5 - var(--erasure-progress)) * 22px),
0,
0
);
}
.biconic-erasure__visual-track {
left: 20px;
right: 20px;
bottom: 9px;
}
.biconic-erasure__cards {
display: flex;
flex-direction: column;
gap: 16px;
}
.biconic-erasure__card {
width: 92%;
padding:
22px
18px
24px
46px;
border-radius: 16px;
}
.biconic-erasure.is-animated .biconic-erasure__card {
opacity:
calc(
.10 +
var(--card-progress) * .90
);
transform:
translate3d(
calc(
var(--card-direction) *
(1 - var(--card-progress)) *
120px
),
0,
0
);
}
.biconic-erasure__card--left {
align-self: flex-start;
}
.biconic-erasure__card--right {
align-self: flex-end;
}
.biconic-erasure__index {
left: 16px;
top: 24px;
}
.biconic-erasure__card h3 {
font-size: 25px !important;
}
.biconic-erasure__card p {
font-size: 16px !important;
line-height: 1.5 !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.biconic-erasure {
--erasure-progress: 1 !important;
}
.biconic-erasure__visual-inner,
.biconic-erasure__visual-word,
.biconic-erasure__card {
transform: none !important;
}
.biconic-erasure__card {
--card-progress: 1 !important;
opacity: 1 !important;
}
}
/* =========================================================
SECTION 03 · STEREOTYPE / MYTHEN VS. FAKTEN · v21
========================================================= */
.biconic-myths {
--font-family: 'Barlow Semi Condensed', Arial, sans-serif;
--bg-color: #f5f5f7;
--card-bg: #ffffff;
--primary-color: #2c3e50;
--accent-color: #5084ab;
--text-main: #333333;
--text-muted: #666666;
--border-color: #e6e7eb;
--bi-pink: #d60270;
--bi-purple: #9b4f96;
--bi-blue: #315bd8;
position: relative;
z-index: 1;
width: 100%;
overflow: clip;
background:
linear-gradient(
180deg,
#ffffff 0%,
var(--bg-color) 15%,
var(--bg-color) 85%,
#ffffff 100%
);
color: var(--text-main);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
var(--font-family)
);
}
body.pcdark-mode .biconic-myths,
html.pcdark-mode body .biconic-myths {
--bg-color: #000000;
--card-bg: #1c1c1e;
--primary-color: #ffffff;
--text-main: #e1e1e1;
--text-muted: #a1a1a6;
--border-color: #303034;
background:
linear-gradient(
180deg,
#000000 0%,
#08080b 15%,
#08080b 85%,
#000000 100%
);
}
.biconic-myths__inner {
width: min(1180px, calc(100% - 56px));
margin: 0 auto;
padding:
clamp(96px, 10vw, 150px)
0
clamp(110px, 12vw, 170px);
}
.biconic-myths__intro {
max-width: 860px;
margin-bottom:
clamp(50px, 7vw, 82px);
}
.biconic-myths__kicker {
margin: 0 0 14px !important;
color: var(--accent-color) !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .18em;
text-transform: uppercase;
}
.biconic-myths__title {
margin: 0 0 24px !important;
color: var(--primary-color) !important;
font-family: inherit !important;
font-size:
clamp(
44px,
5vw,
76px
) !important;
font-weight: 600 !important;
line-height: .98 !important;
letter-spacing: -.04em !important;
}
.biconic-myths__title span {
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.biconic-myths__lead {
margin: 0 !important;
max-width: 720px !important;
color: var(--text-main) !important;
font-size:
clamp(
19px,
1.55vw,
23px
) !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
/* =========================================================
GRID
========================================================= */
.biconic-myths__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap:
clamp(
18px,
2.4vw,
28px
);
perspective: 1600px;
}
/* =========================================================
FLIP CARD
========================================================= */
.biconic-myth-card {
--myth-reveal: 1;
position: relative;
min-width: 0;
min-height: 330px;
padding: 0 !important;
margin: 0 !important;
appearance: none;
border: 0 !important;
background: transparent !important;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
perspective: 1400px;
opacity: var(--myth-reveal);
transform:
translate3d(
0,
calc((1 - var(--myth-reveal)) * 44px),
0
)
scale(
calc(.97 + var(--myth-reveal) * .03)
);
transition:
opacity .4s ease,
transform .5s cubic-bezier(.2,.75,.25,1);
will-change: transform, opacity;
}
.biconic-myth-card__inner {
position: relative;
display: block;
width: 100%;
height: 100%;
min-height: inherit;
transform-style: preserve-3d;
transition:
transform .72s cubic-bezier(.2,.75,.2,1);
will-change: transform;
}
.biconic-myth-card__face {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding:
clamp(
24px,
2.7vw,
34px
);
border:
1px solid
var(--border-color);
border-radius:
clamp(
20px,
2vw,
26px
);
background: var(--card-bg);
box-shadow:
0 16px 40px
rgba(0,0,0,.06);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
body.pcdark-mode .biconic-myth-card__face,
html.pcdark-mode body .biconic-myth-card__face {
box-shadow:
0 18px 44px
rgba(0,0,0,.28);
}
.biconic-myth-card__face--front::before,
.biconic-myth-card__face--back::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background:
linear-gradient(
180deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
}
.biconic-myth-card__face--back {
transform: rotateY(180deg);
background:
linear-gradient(
145deg,
color-mix(in srgb, var(--card-bg) 94%, var(--bi-purple) 6%),
var(--card-bg)
);
}
.biconic-myth-card.is-flipped .biconic-myth-card__inner,
.biconic-myth-card[aria-pressed="true"] .biconic-myth-card__inner {
transform: rotateY(180deg);
}
/* Desktop hover = flip */
@media (hover: hover) and (pointer: fine) {
.biconic-myth-card:hover .biconic-myth-card__inner,
.biconic-myth-card:focus-visible .biconic-myth-card__inner {
transform: rotateY(180deg);
}
}
/* Content */
.biconic-myth-card__number {
margin-bottom: 18px;
color: var(--text-muted);
font-size: 11px;
font-weight: 500;
line-height: 1;
letter-spacing: .14em;
}
.biconic-myth-card__label {
margin-bottom: 14px;
color: var(--accent-color);
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: .16em;
text-transform: uppercase;
}
.biconic-myth-card__question,
.biconic-myth-card__answer {
display: block;
color: var(--primary-color);
font-family: inherit;
}
.biconic-myth-card__question {
font-size:
clamp(
22px,
2vw,
30px
);
font-weight: 600;
line-height: 1.12;
letter-spacing: -.025em;
}
.biconic-myth-card__answer {
font-size:
clamp(
17px,
1.35vw,
20px
);
font-weight: 400;
line-height: 1.5;
}
.biconic-myth-card__hint {
margin-top: auto;
padding-top: 22px;
color: var(--text-muted);
font-size: 12px;
font-weight: 500;
line-height: 1;
}
.biconic-myth-card__hint-mobile {
display: none;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 980px) {
.biconic-myths__inner {
width:
min(
100% - 36px,
900px
);
}
.biconic-myths__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.biconic-myth-card {
min-height: 300px;
}
.biconic-myth-card__hint-desktop {
display: none;
}
.biconic-myth-card__hint-mobile {
display: inline;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.biconic-myths__inner {
width: calc(100% - 28px);
padding:
76px
0
92px;
}
.biconic-myths__title {
font-size:
clamp(
38px,
11vw,
54px
) !important;
}
.biconic-myths__lead {
font-size: 18px !important;
}
.biconic-myths__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.biconic-myth-card {
min-height: 280px;
}
.biconic-myth-card__face {
padding: 24px 22px;
border-radius: 18px;
}
.biconic-myth-card__question {
font-size: 24px;
}
.biconic-myth-card__answer {
font-size: 17px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.biconic-myth-card {
--myth-reveal: 1 !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.biconic-myth-card__inner {
transition: none !important;
}
}
/* =========================================================
SECTION 03 · STEREOTYPE · v22
4 / 3 / 2 Karten + bessere Lesbarkeit
========================================================= */
/* Desktop: 4 Karten nebeneinander */
.biconic-myths__grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 18px !important;
}
.biconic-myth-card {
min-height: 300px !important;
}
.biconic-myth-card__face {
padding: 22px 20px !important;
}
.biconic-myth-card__number {
margin-bottom: 13px !important;
}
.biconic-myth-card__label {
margin-bottom: 11px !important;
font-size: 10px !important;
}
.biconic-myth-card__question {
font-size: clamp(19px, 1.45vw, 24px) !important;
line-height: 1.16 !important;
}
.biconic-myth-card__answer {
font-size: clamp(15px, 1.05vw, 17px) !important;
line-height: 1.48 !important;
}
.biconic-myth-card__hint {
padding-top: 16px !important;
font-size: 11px !important;
}
/* Tablet: 3 Karten nebeneinander */
@media (max-width: 1100px) {
.biconic-myths__grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
}
.biconic-myth-card {
min-height: 290px !important;
}
.biconic-myth-card__question {
font-size: 20px !important;
}
.biconic-myth-card__answer {
font-size: 15.5px !important;
}
}
/* Mobile: 2 Karten nebeneinander */
@media (max-width: 760px) {
.biconic-myths__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.biconic-myth-card {
min-height: 265px !important;
}
.biconic-myth-card__face {
padding: 18px 15px !important;
border-radius: 16px !important;
}
.biconic-myth-card__number {
margin-bottom: 10px !important;
font-size: 9px !important;
}
.biconic-myth-card__label {
margin-bottom: 9px !important;
font-size: 9px !important;
}
.biconic-myth-card__question {
font-size: clamp(16px, 4.5vw, 19px) !important;
line-height: 1.16 !important;
}
.biconic-myth-card__answer {
font-size: clamp(13.5px, 3.7vw, 15px) !important;
line-height: 1.43 !important;
}
.biconic-myth-card__hint {
padding-top: 12px !important;
font-size: 10px !important;
}
}
/* Sehr schmale Smartphones */
@media (max-width: 390px) {
.biconic-myths__grid {
gap: 9px !important;
}
.biconic-myth-card {
min-height: 250px !important;
}
.biconic-myth-card__face {
padding: 16px 13px !important;
}
.biconic-myth-card__question {
font-size: 15px !important;
}
.biconic-myth-card__answer {
font-size: 13px !important;
}
}
/* =========================================================
SECTION 04 · BI+ IN ZAHLEN · v24
EINE Sticky-Karte, die beim Scrollen ihre Inhalte wechselt
========================================================= */
.biconic-stats {
--font-family: 'Barlow Semi Condensed', Arial, sans-serif;
--bg-color: #f5f5f7;
--card-bg: #ffffff;
--primary-color: #2c3e50;
--accent-color: #5084ab;
--text-main: #333333;
--text-muted: #666666;
--border-color: #e6e7eb;
--bi-pink: #d60270;
--bi-purple: #9b4f96;
--bi-blue: #315bd8;
position: relative;
z-index: 1;
width: 100%;
overflow: clip;
background:
linear-gradient(
180deg,
#ffffff 0%,
var(--bg-color) 14%,
var(--bg-color) 84%,
#ffffff 100%
);
color: var(--text-main);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
var(--font-family)
);
}
body.pcdark-mode .biconic-stats,
html.pcdark-mode body .biconic-stats {
--bg-color: #000000;
--card-bg: #1c1c1e;
--primary-color: #ffffff;
--text-main: #e1e1e1;
--text-muted: #a1a1a6;
--border-color: #303034;
background:
linear-gradient(
180deg,
#000000 0%,
#08080b 14%,
#08080b 84%,
#000000 100%
);
}
.biconic-stats__inner {
width: min(1180px, calc(100% - 56px));
margin: 0 auto;
padding:
clamp(96px, 10vw, 150px)
0
clamp(110px, 12vw, 170px);
}
/* Intro */
.biconic-stats__intro {
max-width: 880px;
margin-bottom:
clamp(58px, 8vw, 90px);
}
.biconic-stats__kicker {
margin: 0 0 14px !important;
color: var(--accent-color) !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .18em;
text-transform: uppercase;
}
.biconic-stats__title {
margin: 0 !important;
color: var(--primary-color) !important;
font-family: inherit !important;
font-size:
clamp(
46px,
5.2vw,
78px
) !important;
font-weight: 600 !important;
line-height: .98 !important;
letter-spacing: -.04em !important;
}
.biconic-stats__title span {
display: block;
color: var(--text-muted);
}
/* Story */
.biconic-stats__story {
position: relative;
/*
* 6 Scroll-Schritte.
* Die Sticky-Karte bleibt während der gesamten Strecke stehen.
*/
min-height: 500vh;
}
.biconic-stats__sticky-wrap {
position: sticky;
top:
calc(
var(--biconic-nav-top, 0px)
+ 76px
);
z-index: 3;
min-height:
calc(
100svh
- var(--biconic-nav-top, 0px)
- 104px
);
display: flex;
align-items: center;
}
/* Eine einzige Karte */
.biconic-stats__card {
position: relative;
width: 100%;
display: grid;
grid-template-columns:
minmax(280px, .9fr)
minmax(0, 1.1fr);
gap:
clamp(
42px,
7vw,
96px
);
align-items: center;
padding:
clamp(
34px,
5vw,
58px
);
border:
1px solid
var(--border-color);
border-radius:
clamp(
24px,
2.7vw,
36px
);
background:
color-mix(
in srgb,
var(--card-bg) 92%,
transparent
);
-webkit-backdrop-filter:
blur(16px)
saturate(120%);
backdrop-filter:
blur(16px)
saturate(120%);
box-shadow:
0 24px 60px
rgba(0,0,0,.07);
overflow: hidden;
}
body.pcdark-mode .biconic-stats__card,
html.pcdark-mode body .biconic-stats__card {
box-shadow:
0 26px 64px
rgba(0,0,0,.34);
}
/* Linke Seite */
.biconic-stats__number-side {
min-width: 0;
}
.biconic-stats__card-index {
display: block;
margin-bottom: 18px;
color: var(--text-muted);
font-size: 11px;
font-weight: 500;
letter-spacing: .16em;
}
.biconic-stats__card-value {
width: max-content;
max-width: 100%;
margin-bottom: 16px;
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size:
clamp(
96px,
11vw,
164px
);
font-weight: 600;
line-height: .82;
letter-spacing: -.07em;
transition:
opacity .22s ease,
transform .3s cubic-bezier(.2,.75,.25,1),
filter .22s ease;
will-change:
transform,
opacity,
filter;
}
.biconic-stats__card-word {
color: var(--primary-color);
font-size:
clamp(
17px,
1.55vw,
23px
);
font-weight: 600;
line-height: 1;
letter-spacing: .12em;
transition:
opacity .22s ease,
transform .3s cubic-bezier(.2,.75,.25,1);
}
/* Rechte Seite */
.biconic-stats__text-side {
min-width: 0;
transition:
opacity .22s ease,
transform .34s cubic-bezier(.2,.75,.25,1);
}
.biconic-stats__text-side h3 {
margin:
0
0
20px !important;
max-width: 720px !important;
color: var(--primary-color) !important;
font-family: inherit !important;
font-size:
clamp(
32px,
3.4vw,
50px
) !important;
font-weight: 600 !important;
line-height: 1.03 !important;
letter-spacing: -.03em !important;
}
.biconic-stats__text-side p {
margin: 0 !important;
max-width: 720px !important;
color: var(--text-main) !important;
font-family: inherit !important;
font-size:
clamp(
18px,
1.5vw,
22px
) !important;
font-weight: 400 !important;
line-height: 1.58 !important;
}
/* Wechselanimation */
.biconic-stats__card.is-changing .biconic-stats__card-value {
opacity: 0;
filter: blur(7px);
transform:
translate3d(
0,
-18px,
0
)
scale(.96);
}
.biconic-stats__card.is-changing .biconic-stats__card-word {
opacity: 0;
transform:
translate3d(
-20px,
0,
0
);
}
.biconic-stats__card.is-changing .biconic-stats__text-side {
opacity: 0;
transform:
translate3d(
28px,
0,
0
);
}
/* Fortschritt */
.biconic-stats__progress {
position: absolute;
left:
clamp(
34px,
5vw,
58px
);
right:
clamp(
34px,
5vw,
58px
);
bottom:
clamp(
22px,
3vw,
32px
);
height: 2px;
overflow: hidden;
background: var(--border-color);
}
.biconic-stats__progress span {
display: block;
width: 100%;
height: 100%;
transform:
scaleX(0);
transform-origin: left center;
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
will-change: transform;
}
/*
* Unsichtbare Scroll-Trigger.
* Sie liegen unterhalb der Sticky-Karte und steuern nur den Wechsel.
*/
.biconic-stats__triggers {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.biconic-stats__trigger {
height: calc(500vh / 6);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 980px) {
.biconic-stats__inner {
width:
min(
100% - 36px,
900px
);
}
.biconic-stats__story {
min-height: 460vh;
}
.biconic-stats__trigger {
height: calc(460vh / 6);
}
.biconic-stats__card {
grid-template-columns:
minmax(220px, .78fr)
minmax(0, 1.22fr);
gap: 34px;
padding: 34px;
}
.biconic-stats__card-value {
font-size:
clamp(
78px,
10vw,
122px
);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.biconic-stats {
overflow: hidden;
}
.biconic-stats__inner {
width: calc(100% - 28px);
padding:
76px
0
96px;
}
.biconic-stats__intro {
margin-bottom: 40px;
}
.biconic-stats__title {
font-size:
clamp(
38px,
11vw,
54px
) !important;
}
.biconic-stats__story {
min-height: 470vh;
}
.biconic-stats__trigger {
height: calc(470vh / 6);
}
.biconic-stats__sticky-wrap {
top:
calc(
var(--biconic-nav-top, 0px)
+ 60px
);
min-height:
calc(
100svh
- var(--biconic-nav-top, 0px)
- 78px
);
}
/*
* Mobile ausdrücklich nebeneinander:
* Zahl links, Beschreibung rechts.
*/
.biconic-stats__card {
grid-template-columns:
minmax(110px, .72fr)
minmax(0, 1.28fr);
gap: 18px;
align-items: center;
padding:
22px
18px
28px;
border-radius: 20px;
}
.biconic-stats__card-index {
margin-bottom: 10px;
font-size: 9px;
}
.biconic-stats__card-value {
margin-bottom: 10px;
font-size:
clamp(
48px,
15vw,
72px
);
}
.biconic-stats__card-word {
font-size: 11px;
letter-spacing: .08em;
overflow-wrap: anywhere;
}
.biconic-stats__text-side h3 {
margin-bottom: 10px !important;
font-size:
clamp(
21px,
5.8vw,
28px
) !important;
}
.biconic-stats__text-side p {
font-size:
clamp(
14px,
4vw,
16px
) !important;
line-height: 1.48 !important;
}
.biconic-stats__progress {
left: 18px;
right: 18px;
bottom: 12px;
}
}
/* Sehr schmale Geräte */
@media (max-width: 390px) {
.biconic-stats__card {
grid-template-columns:
minmax(94px, .66fr)
minmax(0, 1.34fr);
gap: 14px;
padding:
20px
15px
26px;
}
.biconic-stats__card-value {
font-size: 44px;
}
.biconic-stats__card-word {
font-size: 10px;
}
.biconic-stats__text-side h3 {
font-size: 20px !important;
}
.biconic-stats__text-side p {
font-size: 13.5px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.biconic-stats__card.is-changing
.biconic-stats__card-value,
.biconic-stats__card.is-changing
.biconic-stats__card-word,
.biconic-stats__card.is-changing
.biconic-stats__text-side {
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
}
/* =========================================================
SECTION 04 · BI+ IN ZAHLEN · v25
Mobile Sticky Fix + Prefix-Abstand + SICHTBAR? vollständig
========================================================= */
/* Prefix und Zahl optisch sauber trennen */
.biconic-stats__card-value {
display: inline-flex;
align-items: baseline;
gap: .10em;
white-space: nowrap;
}
/*
* Prefix wird per JS in eigenes Element geschrieben.
* Dadurch können > und ~ sauber Abstand zur Zahl bekommen.
*/
.biconic-stats__card-prefix {
display: inline-block;
margin-right: .08em;
}
/* SICHTBAR? darf niemals abgeschnitten werden */
.biconic-stats__card-value.is-word-value {
width: 100% !important;
max-width: 100% !important;
font-size:
clamp(
72px,
8.2vw,
128px
) !important;
line-height: .88 !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: keep-all !important;
}
/* =========================================================
MOBILE STICKY FIX
========================================================= */
@media (max-width: 760px) {
/*
* Sticky braucht einen eigenen Container, der deutlich höher
* als der Viewport ist und NICHT selbst overflow hidden besitzt.
*/
.biconic-stats {
overflow: visible !important;
}
.biconic-stats__inner {
overflow: visible !important;
}
.biconic-stats__story {
min-height: 500vh !important;
overflow: visible !important;
}
.biconic-stats__sticky-wrap {
position: sticky !important;
top:
calc(
var(--biconic-nav-top, 0px)
+ 54px
) !important;
z-index: 20 !important;
min-height: auto !important;
height:
calc(
100svh
- var(--biconic-nav-top, 0px)
- 72px
) !important;
display: flex !important;
align-items: center !important;
pointer-events: none;
}
.biconic-stats__card {
pointer-events: auto;
width: 100% !important;
grid-template-columns:
minmax(96px, .68fr)
minmax(0, 1.32fr) !important;
gap: 14px !important;
padding:
18px
15px
24px !important;
border-radius: 18px !important;
}
.biconic-stats__number-side {
min-width: 0 !important;
}
.biconic-stats__card-value {
max-width: 100% !important;
margin-bottom: 8px !important;
font-size:
clamp(
42px,
14vw,
66px
) !important;
line-height: .86 !important;
gap: .08em !important;
}
.biconic-stats__card-value.is-word-value {
font-size:
clamp(
34px,
10.5vw,
52px
) !important;
line-height: .92 !important;
white-space: nowrap !important;
}
.biconic-stats__card-word {
font-size: 10px !important;
line-height: 1.05 !important;
letter-spacing: .06em !important;
overflow-wrap: anywhere;
}
.biconic-stats__text-side h3 {
margin-bottom: 8px !important;
font-size:
clamp(
18px,
5.2vw,
24px
) !important;
line-height: 1.05 !important;
}
.biconic-stats__text-side p {
font-size:
clamp(
13px,
3.7vw,
15px
) !important;
line-height: 1.42 !important;
}
.biconic-stats__progress {
left: 15px !important;
right: 15px !important;
bottom: 9px !important;
}
}
/* Sehr schmale Geräte */
@media (max-width: 390px) {
.biconic-stats__card {
grid-template-columns:
minmax(86px, .64fr)
minmax(0, 1.36fr) !important;
gap: 11px !important;
padding:
16px
13px
22px !important;
}
.biconic-stats__card-value {
font-size: 38px !important;
}
.biconic-stats__card-value.is-word-value {
font-size: 30px !important;
}
.biconic-stats__card-word {
font-size: 9px !important;
}
.biconic-stats__text-side h3 {
font-size: 17px !important;
}
.biconic-stats__text-side p {
font-size: 12.5px !important;
}
}
/* =========================================================
SECTION 04 · BI+ IN ZAHLEN · v26
Zahlenformat / Sichtbar? / Responsive Typografie
========================================================= */
/*
* Zahl jetzt aus drei getrennten Teilen:
* Prefix (> / ~), Zahl und Suffix (%).
* Dadurch kein falsches Zusammenkleben oder Abschneiden mehr.
*/
.biconic-stats__card-value {
display: flex !important;
align-items: baseline !important;
width: 100% !important;
max-width: 100% !important;
gap: 0 !important;
white-space: nowrap !important;
overflow: visible !important;
}
.biconic-stats__value-prefix,
.biconic-stats__value-number,
.biconic-stats__value-suffix {
display: inline-block;
flex: 0 0 auto;
}
.biconic-stats__value-prefix {
margin-right: .14em;
}
.biconic-stats__value-suffix {
margin-left: .08em;
}
/*
* Standard-Zahlen bewusst etwas kleiner als vorher,
* damit >50 %, ~25 % und Prozentzeichen auf allen Geräten passen.
*/
.biconic-stats__card-value:not(.is-word-value) {
font-size:
clamp(
78px,
9vw,
138px
) !important;
}
/*
* Finalzustand SICHTBAR?
* Kein riesiges Wort mehr, sondern immer vollständig sichtbar.
*/
.biconic-stats__card-value.is-word-value {
display: block !important;
width: 100% !important;
max-width: 100% !important;
font-size:
clamp(
58px,
6.6vw,
104px
) !important;
line-height: .9 !important;
letter-spacing: -.055em !important;
white-space: nowrap !important;
overflow: visible !important;
}
/* Beim Wortzustand werden die Zahl-Spans nicht gebraucht */
.biconic-stats__card-value.is-word-value
.biconic-stats__value-prefix,
.biconic-stats__card-value.is-word-value
.biconic-stats__value-suffix {
display: none !important;
}
/* Desktop: etwas mehr Luft für beide Spalten */
@media (min-width: 981px) {
.biconic-stats__card {
grid-template-columns:
minmax(330px, .92fr)
minmax(0, 1.08fr) !important;
gap:
clamp(
48px,
6vw,
86px
) !important;
}
.biconic-stats__number-side {
min-width: 0 !important;
overflow: visible !important;
}
}
/* Tablet */
@media (min-width: 761px) and (max-width: 980px) {
.biconic-stats__card {
grid-template-columns:
minmax(230px, .78fr)
minmax(0, 1.22fr) !important;
gap: 30px !important;
}
.biconic-stats__card-value:not(.is-word-value) {
font-size:
clamp(
66px,
9vw,
104px
) !important;
}
.biconic-stats__card-value.is-word-value {
font-size:
clamp(
48px,
6.2vw,
72px
) !important;
}
.biconic-stats__text-side h3 {
font-size:
clamp(
29px,
3.7vw,
42px
) !important;
}
.biconic-stats__text-side p {
font-size:
clamp(
17px,
1.8vw,
20px
) !important;
}
}
/* =========================================================
MOBILE — alles muss innerhalb des Sticky-Bereichs passen
========================================================= */
@media (max-width: 760px) {
/*
* Sticky etwas weiter unter Navigation/Header.
* Zusätzlicher Sicherheitsabstand verhindert Überdeckung.
*/
.biconic-stats__sticky-wrap {
top:
calc(
var(--biconic-nav-top, 0px)
+ 68px
) !important;
height:
calc(
100svh
- var(--biconic-nav-top, 0px)
- 92px
) !important;
min-height: 360px !important;
align-items: center !important;
}
.biconic-stats__card {
max-height:
calc(
100svh
- var(--biconic-nav-top, 0px)
- 112px
) !important;
grid-template-columns:
minmax(92px, .64fr)
minmax(0, 1.36fr) !important;
gap: 13px !important;
align-items: center !important;
padding:
17px
14px
23px !important;
overflow: visible !important;
}
.biconic-stats__number-side,
.biconic-stats__text-side {
min-width: 0 !important;
}
.biconic-stats__card-value:not(.is-word-value) {
font-size:
clamp(
36px,
12.2vw,
56px
) !important;
line-height: .88 !important;
}
.biconic-stats__value-prefix {
margin-right: .12em !important;
}
.biconic-stats__value-suffix {
margin-left: .06em !important;
}
.biconic-stats__card-value.is-word-value {
font-size:
clamp(
25px,
7.8vw,
38px
) !important;
line-height: .92 !important;
letter-spacing: -.045em !important;
white-space: nowrap !important;
}
.biconic-stats__card-word {
margin-top: 2px !important;
font-size: 8.5px !important;
line-height: 1.05 !important;
letter-spacing: .055em !important;
}
.biconic-stats__card-index {
margin-bottom: 7px !important;
font-size: 8px !important;
}
.biconic-stats__text-side h3 {
margin-bottom: 7px !important;
font-size:
clamp(
16px,
4.9vw,
21px
) !important;
line-height: 1.04 !important;
}
.biconic-stats__text-side p {
font-size:
clamp(
11.8px,
3.45vw,
14px
) !important;
line-height: 1.4 !important;
}
}
/* Kleine Smartphones */
@media (max-width: 390px) {
.biconic-stats__sticky-wrap {
top:
calc(
var(--biconic-nav-top, 0px)
+ 62px
) !important;
}
.biconic-stats__card {
grid-template-columns:
minmax(80px, .60fr)
minmax(0, 1.40fr) !important;
gap: 10px !important;
padding:
15px
12px
21px !important;
}
.biconic-stats__card-value:not(.is-word-value) {
font-size: 33px !important;
}
.biconic-stats__card-value.is-word-value {
font-size: 23px !important;
}
.biconic-stats__text-side h3 {
font-size: 15.5px !important;
}
.biconic-stats__text-side p {
font-size: 11.2px !important;
}
}
/* =========================================================
SECTION 04 · v27
MOBILE FIX: SICHTBAR? vollständig sichtbar
========================================================= */
@media (max-width: 760px) {
/*
* Linke Spalte etwas breiter, damit auch der Wortzustand
* vollständig Platz findet.
*/
.biconic-stats__card {
grid-template-columns:
minmax(112px, .76fr)
minmax(0, 1.24fr) !important;
gap: 12px !important;
}
/*
* Der finale Wortzustand wird bewusst deutlich kleiner
* als Prozentzahlen dargestellt.
*/
.biconic-stats__card-value.is-word-value {
width: 100% !important;
max-width: 100% !important;
font-size:
clamp(
18px,
5.6vw,
27px
) !important;
line-height: 1 !important;
letter-spacing: -.045em !important;
white-space: nowrap !important;
overflow: visible !important;
transform:
scaleX(.92);
transform-origin: left center;
}
/*
* Doppelte Beschriftung im finalen Zustand vermeiden:
* SICHTBAR? steht bereits groß als Wert.
*/
.biconic-stats__card-value.is-word-value
+ .biconic-stats__card-word {
opacity: .72;
font-size: 8px !important;
}
}
/* Sehr schmale Smartphones */
@media (max-width: 390px) {
.biconic-stats__card {
grid-template-columns:
minmax(100px, .73fr)
minmax(0, 1.27fr) !important;
}
.biconic-stats__card-value.is-word-value {
font-size: 17px !important;
transform:
scaleX(.88);
}
}
/* =========================================================
SECTION 05 · BI+ GESCHICHTE · v29
Präzise Sticky Scroll-Story
========================================================= */
.biconic-history {
--font-family: 'Barlow Semi Condensed', Arial, sans-serif;
--bg-color: #f5f5f7;
--card-bg: #ffffff;
--primary-color: #2c3e50;
--accent-color: #5084ab;
--text-main: #333333;
--text-muted: #666666;
--border-color: #e6e7eb;
--bi-pink: #d60270;
--bi-purple: #9b4f96;
--bi-blue: #315bd8;
--history-progress: 0;
--scene-progress: 0;
position: relative;
z-index: 1;
width: 100%;
/*
* Sticky darf NICHT durch overflow: hidden/clip
* auf einem Vorfahren blockiert werden.
*/
overflow: visible !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
var(--bg-color) 14%,
var(--bg-color) 86%,
#ffffff 100%
);
color: var(--text-main);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
var(--font-family)
);
}
body.pcdark-mode .biconic-history,
html.pcdark-mode body .biconic-history {
--bg-color: #000000;
--card-bg: #1c1c1e;
--primary-color: #ffffff;
--text-main: #e1e1e1;
--text-muted: #a1a1a6;
--border-color: #303034;
background:
linear-gradient(
180deg,
#000000 0%,
#08080b 14%,
#08080b 86%,
#000000 100%
);
}
.biconic-history__inner {
width: min(1180px, calc(100% - 56px));
margin: 0 auto;
padding:
clamp(100px, 10vw, 150px)
0
clamp(130px, 14vw, 210px);
overflow: visible !important;
}
/* =========================================================
INTRO
========================================================= */
.biconic-history__intro {
max-width: 900px;
margin-bottom:
clamp(76px, 9vw, 118px);
}
.biconic-history__kicker {
margin: 0 0 14px !important;
color: var(--accent-color) !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .18em;
text-transform: uppercase;
}
.biconic-history__title {
margin: 0 0 30px !important;
color: var(--primary-color) !important;
font-family: inherit !important;
font-size:
clamp(
46px,
5.3vw,
80px
) !important;
font-weight: 600 !important;
line-height: .98 !important;
letter-spacing: -.04em !important;
}
.biconic-history__intro-copy {
max-width: 760px;
}
.biconic-history__intro-copy p {
margin: 0 0 1em !important;
color: var(--text-main) !important;
font-size:
clamp(
19px,
1.5vw,
23px
) !important;
line-height: 1.55 !important;
}
/* =========================================================
STORY
========================================================= */
.biconic-history__story {
position: relative;
min-height: 620vh;
overflow: visible !important;
}
.biconic-history__sticky-shell {
position: sticky !important;
top:
calc(
var(--biconic-nav-top, 0px)
+ 76px
) !important;
z-index: 10;
min-height:
calc(
100svh
- var(--biconic-nav-top, 0px)
- 98px
);
display: flex;
align-items: center;
pointer-events: none;
}
.biconic-history__stage {
width: 100%;
display: grid;
grid-template-columns:
minmax(250px, .72fr)
62px
minmax(0, 1.28fr);
gap:
clamp(
28px,
4vw,
56px
);
align-items: stretch;
pointer-events: auto;
}
/* =========================================================
LEFT YEAR PANEL
========================================================= */
.biconic-history__year-panel {
position: relative;
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: center;
padding:
clamp(
28px,
3vw,
40px
);
border:
1px solid
var(--border-color);
border-radius:
clamp(
22px,
2.5vw,
32px
);
background:
color-mix(
in srgb,
var(--card-bg) 90%,
transparent
);
box-shadow:
0 20px 50px
rgba(0,0,0,.06);
overflow: hidden;
}
body.pcdark-mode .biconic-history__year-panel,
html.pcdark-mode body .biconic-history__year-panel {
box-shadow:
0 24px 60px
rgba(0,0,0,.30);
}
.biconic-history__stage-index {
position: absolute;
top: 28px;
left: 30px;
color: var(--text-muted);
font-size: 11px;
font-weight: 500;
letter-spacing: .16em;
}
.biconic-history__stage-year {
margin-bottom: 18px;
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size:
clamp(
62px,
7vw,
112px
);
font-weight: 600;
line-height: .86;
letter-spacing: -.065em;
transition:
opacity .22s ease,
transform .3s cubic-bezier(.2,.75,.25,1),
filter .22s ease;
}
.biconic-history__stage-label {
color: var(--primary-color);
font-size:
clamp(
14px,
1.25vw,
19px
);
font-weight: 600;
line-height: 1;
letter-spacing: .12em;
transition:
opacity .22s ease,
transform .3s cubic-bezier(.2,.75,.25,1);
}
/* =========================================================
CENTER RAIL
========================================================= */
.biconic-history__rail {
position: relative;
width: 62px;
min-height: 420px;
display: flex;
justify-content: center;
}
.biconic-history__rail-base,
.biconic-history__rail-progress {
position: absolute;
top: 16px;
bottom: 16px;
width: 3px;
border-radius: 999px;
}
.biconic-history__rail-base {
background: var(--border-color);
}
.biconic-history__rail-progress {
background:
linear-gradient(
180deg,
var(--bi-pink) 0%,
var(--bi-purple) 48%,
var(--bi-blue) 100%
);
transform:
scaleY(
var(--history-progress)
);
transform-origin: top center;
will-change: transform;
}
.biconic-history__rail-dot {
--dot-progress: 0;
position: absolute;
left: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
border:
3px solid
color-mix(
in srgb,
var(--text-muted) 34%,
var(--card-bg)
);
background: var(--card-bg);
transform:
translateX(-50%)
scale(
calc(
.86 +
var(--dot-progress) * .18
)
);
transition:
border-color .28s ease,
background .28s ease,
box-shadow .28s ease,
transform .28s ease;
z-index: 3;
}
.biconic-history__rail-dot:nth-of-type(3) { top: 3%; }
.biconic-history__rail-dot:nth-of-type(4) { top: 18.5%; }
.biconic-history__rail-dot:nth-of-type(5) { top: 34%; }
.biconic-history__rail-dot:nth-of-type(6) { top: 49.5%; }
.biconic-history__rail-dot:nth-of-type(7) { top: 65%; }
.biconic-history__rail-dot:nth-of-type(8) { top: 80.5%; }
.biconic-history__rail-dot:nth-of-type(9) { top: 96%; }
.biconic-history__rail-dot.is-passed,
.biconic-history__rail-dot.is-active {
border-color: transparent;
background:
linear-gradient(
135deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
box-shadow:
0 0 0 6px
color-mix(
in srgb,
var(--bi-purple) 12%,
transparent
);
}
.biconic-history__rail-dot.is-active {
transform:
translateX(-50%)
scale(1.22);
}
/* =========================================================
RIGHT CARD
========================================================= */
.biconic-history__card {
position: relative;
min-height: 420px;
display: grid;
grid-template-rows:
auto
auto
minmax(150px, 1fr);
gap: 22px;
padding:
clamp(
28px,
3.2vw,
42px
);
border:
1px solid
var(--border-color);
border-radius:
clamp(
22px,
2.5vw,
32px
);
background:
color-mix(
in srgb,
var(--card-bg) 92%,
transparent
);
box-shadow:
0 20px 50px
rgba(0,0,0,.06);
overflow: hidden;
transition:
opacity .22s ease,
transform .34s cubic-bezier(.2,.75,.25,1);
}
body.pcdark-mode .biconic-history__card,
html.pcdark-mode body .biconic-history__card {
box-shadow:
0 24px 60px
rgba(0,0,0,.30);
}
.biconic-history__card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
}
.biconic-history__card-year {
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size:
clamp(
28px,
2.6vw,
42px
);
font-weight: 600;
line-height: 1;
letter-spacing: -.035em;
}
.biconic-history__card-counter {
color: var(--text-muted);
font-size: 11px;
font-weight: 500;
letter-spacing: .14em;
}
.biconic-history__card-body h3 {
margin:
0
0
16px !important;
color: var(--primary-color) !important;
font-family: inherit !important;
font-size:
clamp(
28px,
2.8vw,
42px
) !important;
font-weight: 600 !important;
line-height: 1.04 !important;
letter-spacing: -.028em !important;
}
.biconic-history__card-body p {
margin: 0 !important;
color: var(--text-main) !important;
font-size:
clamp(
17px,
1.25vw,
20px
) !important;
line-height: 1.56 !important;
}
.biconic-history__card.is-changing {
opacity: .36;
transform:
translate3d(
22px,
0,
0
);
}
/* =========================================================
VISUAL SCENES
========================================================= */
.biconic-history__card-visual {
position: relative;
min-height: 150px;
border:
1px solid
var(--border-color);
border-radius: 18px;
background:
color-mix(
in srgb,
var(--bg-color) 64%,
var(--card-bg)
);
overflow: hidden;
}
.history-scene {
--scene-progress: 0;
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition:
opacity .35s ease;
}
.history-scene.is-active {
opacity: 1;
}
/* 1970s / 80s */
.history-node {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background:
linear-gradient(
135deg,
var(--bi-pink),
var(--bi-blue)
);
opacity:
calc(
.08 +
var(--scene-progress) * .92
);
}
.history-node--1 { left: 12%; top: 26%; transform: translate3d(calc((1 - var(--scene-progress)) * -42px), calc((1 - var(--scene-progress)) * -18px),0); }
.history-node--2 { left: 38%; top: 18%; transform: translate3d(calc((1 - var(--scene-progress)) * 30px), calc((1 - var(--scene-progress)) * -28px),0); }
.history-node--3 { right: 17%; top: 32%; transform: translate3d(calc((1 - var(--scene-progress)) * 36px), calc((1 - var(--scene-progress)) * -8px),0); }
.history-node--4 { left: 22%; bottom: 20%; transform: translate3d(calc((1 - var(--scene-progress)) * -30px), calc((1 - var(--scene-progress)) * 30px),0); }
.history-node--5 { right: 30%; bottom: 16%; transform: translate3d(calc((1 - var(--scene-progress)) * 34px), calc((1 - var(--scene-progress)) * 28px),0); }
.history-node--6 { left: 50%; top: 48%; transform: translate3d(-50%, -50%, 0) scale(calc(.7 + var(--scene-progress) * .3)); }
/* 1988 */
.eastwest-line {
position: absolute;
top: 50%;
width: 43%;
height: 3px;
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
}
.eastwest-line--left {
left: 0;
transform:
translate3d(
calc(
(
1 - var(--scene-progress)
) * -110%
),
0,
0
);
}
.eastwest-line--right {
right: 0;
transform:
scaleX(-1)
translate3d(
calc(
(
1 - var(--scene-progress)
) * -110%
),
0,
0
);
}
.eastwest-node {
position: absolute;
border-radius: 50%;
background: var(--bi-purple);
}
.eastwest-node--center {
left: 50%;
top: 50%;
width: 22px;
height: 22px;
transform:
translate(-50%, -50%)
scale(
calc(
.55 +
var(--scene-progress) * .45
)
);
}
.eastwest-node--extra {
left: 63%;
top: 30%;
width: 11px;
height: 11px;
opacity: var(--scene-progress);
}
/* 1991 network */
.network-node,
.network-link {
position: absolute;
}
.network-node {
width: 13px;
height: 13px;
border-radius: 50%;
background:
linear-gradient(
135deg,
var(--bi-pink),
var(--bi-blue)
);
opacity: var(--scene-progress);
}
.network-node--1 { left: 18%; top: 24%; }
.network-node--2 { right: 18%; top: 22%; }
.network-node--3 { left: 30%; bottom: 20%; }
.network-node--4 { right: 28%; bottom: 18%; }
.network-node--5 { left: 50%; top: 50%; transform: translate(-50%,-50%); }
.network-link {
height: 2px;
background: var(--bi-purple);
transform-origin: left center;
opacity:
calc(
var(--scene-progress) * .78
);
}
.network-link--1 { left: 21%; top: 28%; width: 34%; transform: rotate(18deg) scaleX(var(--scene-progress)); }
.network-link--2 { left: 50%; top: 50%; width: 32%; transform: rotate(-20deg) scaleX(var(--scene-progress)); }
.network-link--3 { left: 32%; bottom: 24%; width: 23%; transform: rotate(-28deg) scaleX(var(--scene-progress)); }
.network-link--4 { left: 50%; top: 50%; width: 26%; transform: rotate(42deg) scaleX(var(--scene-progress)); }
/* 1992 organization */
.org-ring,
.org-core,
.org-spoke {
position: absolute;
}
.org-ring {
left: 50%;
top: 50%;
border:
2px solid
var(--bi-purple);
border-radius: 50%;
transform:
translate(-50%, -50%)
scale(
calc(
.5 +
var(--scene-progress) * .5
)
);
opacity: var(--scene-progress);
}
.org-ring--1 { width: 112px; height: 112px; }
.org-ring--2 { width: 70px; height: 70px; }
.org-core {
left: 50%;
top: 50%;
width: 23px;
height: 23px;
border-radius: 50%;
background:
linear-gradient(
135deg,
var(--bi-pink),
var(--bi-blue)
);
transform:
translate(-50%, -50%)
scale(
calc(
.6 +
var(--scene-progress) * .4
)
);
}
.org-spoke {
left: 50%;
top: 50%;
width: 84px;
height: 2px;
background: var(--bi-purple);
transform-origin: left center;
opacity:
calc(
var(--scene-progress) * .78
);
}
.org-spoke--1 { transform: rotate(0deg) scaleX(var(--scene-progress)); }
.org-spoke--2 { transform: rotate(90deg) scaleX(var(--scene-progress)); }
.org-spoke--3 { transform: rotate(180deg) scaleX(var(--scene-progress)); }
.org-spoke--4 { transform: rotate(270deg) scaleX(var(--scene-progress)); }
/* 1998 flag */
.history-scene--flag {
display: flex;
flex-direction: column;
}
.flag-band {
flex: 1;
transform:
translate3d(
calc(
(
1 - var(--scene-progress)
) * 110%
),
0,
0
);
}
.flag-band--pink {
background: #d60270;
}
.flag-band--purple {
background: #9b4f96;
transform:
translate3d(
calc(
(
1 - var(--scene-progress)
) * -110%
),
0,
0
);
}
.flag-band--blue {
background: #315bd8;
}
/* 1999 */
.history-scene--date {
display: flex;
align-items: center;
justify-content: center;
}
.history-date-outline {
color: transparent;
-webkit-text-stroke:
1.5px
color-mix(
in srgb,
var(--primary-color) 48%,
transparent
);
font-size:
clamp(
32px,
4.6vw,
60px
);
font-weight: 600;
line-height: .95;
letter-spacing: -.03em;
opacity:
calc(
.12 +
var(--scene-progress) * .88
);
transform:
scale(
calc(
.9 +
var(--scene-progress) * .1
)
);
}
/* 2024 */
.future-core,
.future-ring,
.future-dot {
position: absolute;
}
.future-core {
left: 50%;
top: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
background:
linear-gradient(
135deg,
var(--bi-pink),
var(--bi-blue)
);
transform:
translate(-50%, -50%)
scale(
calc(
.6 +
var(--scene-progress) * .6
)
);
}
.future-ring {
left: 50%;
top: 50%;
width: 132px;
height: 132px;
border:
2px solid
var(--bi-purple);
border-radius: 50%;
transform:
translate(-50%, -50%)
scale(
calc(
.65 +
var(--scene-progress) * .35
)
);
opacity:
calc(
.12 +
var(--scene-progress) * .62
);
}
.future-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--bi-blue);
opacity:
calc(
var(--scene-progress) * .65
);
}
.future-dot--1 { left: 49%; bottom: 22%; }
.future-dot--2 { left: 52%; bottom: 10%; }
.future-dot--3 { left: 48%; bottom: -2%; }
/* =========================================================
INVISIBLE TRIGGERS
========================================================= */
.biconic-history__triggers {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.biconic-history__trigger {
height: calc(620vh / 7);
}
/* =========================================================
OUTRO
========================================================= */
.biconic-history__outro {
position: relative;
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
padding-top:
clamp(
90px,
12vw,
160px
);
}
.biconic-history__outro::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background:
linear-gradient(
180deg,
color-mix(
in srgb,
var(--bi-blue) 44%,
transparent
),
transparent
);
opacity: .45;
}
.biconic-history__outro-title {
margin: 0 !important;
color: var(--primary-color) !important;
font-size:
clamp(
64px,
9vw,
138px
) !important;
font-weight: 600 !important;
line-height: .86 !important;
letter-spacing: -.055em !important;
}
.biconic-history__outro-claim {
margin:
20px
0
16px !important;
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
font-size:
clamp(
34px,
4vw,
58px
) !important;
font-weight: 600 !important;
line-height: 1 !important;
}
.biconic-history__outro-sub {
margin: 0 !important;
color: var(--text-muted) !important;
font-size:
clamp(
18px,
1.6vw,
24px
) !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 980px) {
.biconic-history__inner {
width:
min(
100% - 36px,
900px
);
}
.biconic-history__story {
min-height: 590vh;
}
.biconic-history__trigger {
height: calc(590vh / 7);
}
.biconic-history__stage {
grid-template-columns:
minmax(190px, .58fr)
50px
minmax(0, 1.42fr);
gap: 24px;
}
.biconic-history__year-panel,
.biconic-history__card,
.biconic-history__rail {
min-height: 390px;
}
.biconic-history__stage-year {
font-size:
clamp(
50px,
8vw,
86px
);
}
}
/* =========================================================
MOBILE — gleiche Sticky-Logik wie Desktop
========================================================= */
@media (max-width: 760px) {
.biconic-history {
overflow: visible !important;
}
.biconic-history__inner {
width: calc(100% - 28px);
padding:
76px
0
110px;
overflow: visible !important;
}
.biconic-history__intro {
margin-bottom: 54px;
}
.biconic-history__title {
font-size:
clamp(
38px,
11vw,
54px
) !important;
}
.biconic-history__intro-copy p {
font-size: 18px !important;
}
.biconic-history__story {
min-height: 610vh;
overflow: visible !important;
}
.biconic-history__trigger {
height: calc(610vh / 7);
}
.biconic-history__sticky-shell {
top:
calc(
var(--biconic-nav-top, 0px)
+ 64px
) !important;
min-height:
calc(
100svh
- var(--biconic-nav-top, 0px)
- 82px
);
align-items: center;
}
/*
* Mobile:
* links kompakte Jahr-Spalte,
* Mitte Progress-Linie,
* rechts Karte mit Jahreszahl.
*/
.biconic-history__stage {
grid-template-columns:
72px
26px
minmax(0, 1fr);
gap: 10px;
align-items: stretch;
}
.biconic-history__year-panel {
min-height: 330px;
padding:
14px
10px;
border-radius: 16px;
}
.biconic-history__stage-index {
top: 14px;
left: 12px;
font-size: 8px;
}
.biconic-history__stage-year {
margin: 0;
font-size:
clamp(
26px,
8.8vw,
40px
);
line-height: .9;
/*
* Lange 1970er/80er vertikal kompakter.
*/
overflow-wrap: anywhere;
}
.biconic-history__stage-label {
margin-top: 10px;
font-size: 8px;
line-height: 1.1;
letter-spacing: .04em;
overflow-wrap: anywhere;
}
.biconic-history__rail {
width: 26px;
min-height: 330px;
}
.biconic-history__rail-base,
.biconic-history__rail-progress {
width: 3px;
}
.biconic-history__rail-dot {
width: 12px;
height: 12px;
border-width: 2px;
}
.biconic-history__card {
min-height: 330px;
grid-template-rows:
auto
auto
minmax(96px, 1fr);
gap: 12px;
padding:
16px
14px;
border-radius: 16px;
}
.biconic-history__card-head {
gap: 8px;
}
.biconic-history__card-year {
font-size:
clamp(
20px,
6.4vw,
28px
);
}
.biconic-history__card-counter {
font-size: 8px;
}
.biconic-history__card-body h3 {
margin-bottom: 8px !important;
font-size:
clamp(
18px,
5.2vw,
23px
) !important;
}
.biconic-history__card-body p {
font-size:
clamp(
12px,
3.5vw,
14px
) !important;
line-height: 1.42 !important;
}
.biconic-history__card-visual {
min-height: 96px;
border-radius: 12px;
}
.history-date-outline {
font-size:
clamp(
21px,
6vw,
29px
);
}
.biconic-history__outro {
min-height: 68vh;
padding-top: 96px;
}
.biconic-history__outro-title {
font-size:
clamp(
54px,
17vw,
86px
) !important;
}
.biconic-history__outro-claim {
font-size:
clamp(
30px,
9vw,
44px
) !important;
}
}
/* Very small mobile */
@media (max-width: 390px) {
.biconic-history__stage {
grid-template-columns:
62px
22px
minmax(0, 1fr);
gap: 8px;
}
.biconic-history__stage-year {
font-size: 24px;
}
.biconic-history__card {
padding:
14px
12px;
}
.biconic-history__card-year {
font-size: 19px;
}
.biconic-history__card-body h3 {
font-size: 17px !important;
}
.biconic-history__card-body p {
font-size: 11.5px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.biconic-history {
--history-progress: 1 !important;
--scene-progress: 1 !important;
}
.biconic-history__card,
.biconic-history__stage-year,
.history-node,
.eastwest-line,
.network-link,
.org-ring,
.org-spoke,
.flag-band,
.history-date-outline,
.future-core,
.future-ring {
transition: none !important;
transform: none !important;
}
}
/* =========================================================
SECTION 05 · v30
Mobile-Hierarchie + deutlichere historische Animationen
========================================================= */
/* Linke Karte: Jahr klar kleiner, damit rechts die Geschichte trägt */
.biconic-history__stage-year {
font-size:
clamp(
52px,
6.3vw,
96px
) !important;
}
/* Rechte Karten-Jahreszahl kleiner, Fokus soll nicht auf ihr liegen */
.biconic-history__card-year {
font-size:
clamp(
24px,
2vw,
34px
) !important;
opacity: .88;
}
/* =========================================================
1988 · OST / WEST
========================================================= */
.history-scene--eastwest {
overflow: hidden;
}
.eastwest-axis {
position: absolute;
left: 10%;
right: 10%;
top: 50%;
height: 4px;
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--bi-pink) 0%,
var(--bi-purple) 50%,
var(--bi-blue) 100%
);
transform:
scaleX(
calc(
.05 +
var(--scene-progress) * .95
)
);
transform-origin: center center;
opacity:
calc(
.14 +
var(--scene-progress) * .86
);
}
.eastwest-node {
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background:
linear-gradient(
135deg,
var(--bi-pink),
var(--bi-blue)
);
opacity:
calc(
.10 +
var(--scene-progress) * .90
);
box-shadow:
0 0 0
calc(var(--scene-progress) * 7px)
color-mix(
in srgb,
var(--bi-purple) 14%,
transparent
);
transition:
transform .18s linear;
}
.eastwest-node--top-left {
left: 13%;
top: 24%;
transform:
translate3d(
calc((1 - var(--scene-progress)) * -70px),
calc((1 - var(--scene-progress)) * -22px),
0
);
}
.eastwest-node--bottom-left {
left: 13%;
bottom: 24%;
transform:
translate3d(
calc((1 - var(--scene-progress)) * -70px),
calc((1 - var(--scene-progress)) * 22px),
0
);
}
.eastwest-node--top-right {
right: 13%;
top: 24%;
transform:
translate3d(
calc((1 - var(--scene-progress)) * 70px),
calc((1 - var(--scene-progress)) * -22px),
0
);
}
.eastwest-node--bottom-right {
right: 13%;
bottom: 24%;
transform:
translate3d(
calc((1 - var(--scene-progress)) * 70px),
calc((1 - var(--scene-progress)) * 22px),
0
);
}
.eastwest-node--center {
left: 50%;
top: 50%;
width: 22px;
height: 22px;
transform:
translate(-50%, -50%)
scale(
calc(
.45 +
var(--scene-progress) * .55
)
);
}
.eastwest-node--aidshilfe {
left: 58%;
top: 25%;
width: 12px;
height: 12px;
transform:
translate3d(
0,
calc((1 - var(--scene-progress)) * -28px),
0
);
opacity: var(--scene-progress);
}
.eastwest-label {
position: absolute;
top: 50%;
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
opacity:
calc(
.25 +
var(--scene-progress) * .75
);
}
.eastwest-label--left {
left: 7%;
transform:
translate3d(
0,
-34px,
0
);
}
.eastwest-label--right {
right: 7%;
transform:
translate3d(
0,
-34px,
0
);
}
/* =========================================================
1991 · VERNETZUNG
========================================================= */
.network-node {
width: 15px !important;
height: 15px !important;
box-shadow:
0 0 0
calc(var(--scene-progress) * 5px)
color-mix(
in srgb,
var(--bi-purple) 12%,
transparent
);
}
.network-node--1 { left: 12%; top: 22%; }
.network-node--2 { right: 12%; top: 20%; }
.network-node--3 { left: 22%; bottom: 18%; }
.network-node--4 { right: 22%; bottom: 16%; }
.network-node--5 { left: 50%; top: 50%; transform: translate(-50%,-50%); }
.network-node--6 { left: 34%; top: 36%; }
.network-node--7 { right: 34%; bottom: 34%; }
.network-link {
height: 3px !important;
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
) !important;
opacity:
calc(
.08 +
var(--scene-progress) * .92
) !important;
}
.network-link--1 { left: 14%; top: 27%; width: 36%; transform: rotate(17deg) scaleX(var(--scene-progress)); }
.network-link--2 { left: 50%; top: 50%; width: 35%; transform: rotate(-21deg) scaleX(var(--scene-progress)); }
.network-link--3 { left: 24%; bottom: 23%; width: 29%; transform: rotate(-31deg) scaleX(var(--scene-progress)); }
.network-link--4 { left: 50%; top: 50%; width: 30%; transform: rotate(39deg) scaleX(var(--scene-progress)); }
.network-link--5 { left: 33%; top: 39%; width: 20%; transform: rotate(11deg) scaleX(var(--scene-progress)); }
.network-link--6 { left: 47%; top: 53%; width: 22%; transform: rotate(69deg) scaleX(var(--scene-progress)); }
.network-link--7 { left: 38%; top: 40%; width: 31%; transform: rotate(-18deg) scaleX(var(--scene-progress)); }
.network-link--8 { left: 22%; bottom: 24%; width: 51%; transform: rotate(5deg) scaleX(var(--scene-progress)); }
/* =========================================================
1998 · FLAGGE
Pink 40 %, Lila 20 %, Blau 40 %
========================================================= */
.history-scene--flag {
display: grid !important;
grid-template-columns:
minmax(0, 1.15fr)
minmax(150px, .85fr);
gap: 20px;
align-items: center;
padding: 18px;
}
.history-flag-wrap {
position: relative;
width: 100%;
aspect-ratio: 5 / 3;
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 16px 34px
rgba(0,0,0,.08);
}
.history-flag-wrap .flag-band {
flex: none !important;
}
.history-flag-wrap .flag-band--pink {
height: 40%;
background: #d60270;
}
.history-flag-wrap .flag-band--purple {
height: 20%;
background: #9b4f96;
}
.history-flag-wrap .flag-band--blue {
height: 40%;
background: #0038a8;
}
.history-flag-legend {
display: flex;
flex-direction: column;
gap: 10px;
}
.history-flag-legend span {
display: flex;
align-items: center;
gap: 9px;
color: var(--text-main);
font-size: 12px;
line-height: 1.2;
}
.legend-dot {
flex: 0 0 auto;
width: 16px;
height: 16px;
border-radius: 5px;
}
.legend-dot--pink { background: #d60270; }
.legend-dot--purple { background: #9b4f96; }
.legend-dot--blue { background: #0038a8; }
.history-flag-credit {
position: absolute;
left: 18px;
right: 18px;
bottom: 8px;
margin: 0 !important;
color: var(--text-muted) !important;
font-size: 10px !important;
text-align: center;
}
/* =========================================================
1999 · BUCHSTABEN SETZEN SICH ZUSAMMEN
========================================================= */
.history-scene--date {
display: flex !important;
align-items: center;
justify-content: center;
overflow: hidden;
}
.history-date-assembly {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
font-size:
clamp(
28px,
4vw,
54px
);
font-weight: 600;
line-height: 1;
letter-spacing: -.04em;
white-space: nowrap;
}
.history-date-assembly > span:not(.history-date-space) {
display: inline-block;
color: transparent;
-webkit-text-stroke:
1.25px
color-mix(
in srgb,
var(--primary-color) 65%,
transparent
);
opacity:
calc(
.12 +
var(--scene-progress) * .88
);
transform:
translate3d(
calc(
(
.5 - var(--scene-progress)
) * 42px
),
calc(
(
1 - var(--scene-progress)
) * 24px
),
0
)
rotate(
calc(
(
1 - var(--scene-progress)
) * 8deg
)
);
transition:
transform .18s linear,
opacity .18s linear;
}
.history-date-assembly > span:nth-child(2n) {
transform:
translate3d(
calc(
(
.5 - var(--scene-progress)
) * -38px
),
calc(
(
1 - var(--scene-progress)
) * -20px
),
0
)
rotate(
calc(
(
1 - var(--scene-progress)
) * -8deg
)
);
}
.history-date-space {
width: .35em;
}
.history-date-year {
position: absolute;
right: 18px;
bottom: 12px;
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
opacity:
calc(
.18 +
var(--scene-progress) * .82
);
}
/* =========================================================
2024 · FACHSTELLE / ANLAUFSTELLE
========================================================= */
.history-scene--future {
display: flex !important;
align-items: center;
justify-content: center;
overflow: hidden;
}
.history-office-symbol {
position: relative;
width: 126px;
height: 112px;
border:
3px solid
var(--bi-purple);
border-radius:
18px 18px 8px 8px;
background:
color-mix(
in srgb,
var(--card-bg) 88%,
transparent
);
transform:
translate3d(
0,
calc((1 - var(--scene-progress)) * 28px),
0
)
scale(
calc(.82 + var(--scene-progress) * .18)
);
opacity:
calc(.16 + var(--scene-progress) * .84);
}
.office-door {
position: absolute;
left: 50%;
bottom: 0;
width: 34px;
height: 54px;
transform: translateX(-50%);
border-radius: 8px 8px 0 0;
background:
linear-gradient(
180deg,
var(--bi-pink),
var(--bi-purple)
);
}
.office-window {
position: absolute;
top: 34px;
width: 22px;
height: 22px;
border-radius: 6px;
background: var(--bi-blue);
}
.office-window--1 { left: 18px; }
.office-window--2 { right: 18px; }
.office-sign {
position: absolute;
left: 50%;
top: 10px;
transform: translateX(-50%);
color: var(--primary-color);
font-size: 18px;
font-weight: 700;
}
.history-office-rays span {
position: absolute;
left: 50%;
top: 50%;
width: 180px;
height: 2px;
background:
linear-gradient(
90deg,
transparent,
var(--bi-purple),
transparent
);
transform-origin: center center;
opacity:
calc(.08 + var(--scene-progress) * .30);
}
.history-office-rays span:nth-child(1) {
transform: translate(-50%,-50%) rotate(0deg) scaleX(var(--scene-progress));
}
.history-office-rays span:nth-child(2) {
transform: translate(-50%,-50%) rotate(45deg) scaleX(var(--scene-progress));
}
.history-office-rays span:nth-child(3) {
transform: translate(-50%,-50%) rotate(-45deg) scaleX(var(--scene-progress));
}
.history-office-label {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
margin: 0 !important;
color: var(--text-muted) !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
}
/* =========================================================
MOBILE · Layout wie Vorlage:
Timeline links, rechte Karte dominant, linke Jahr-Karte kleiner
========================================================= */
@media (max-width: 760px) {
.biconic-history__stage {
grid-template-columns:
54px
22px
minmax(0, 1fr) !important;
gap: 8px !important;
}
/* linke Karte deutlich schmaler und kleinere Typo */
.biconic-history__year-panel {
min-height: 330px !important;
padding:
12px
8px !important;
border-radius: 14px !important;
}
.biconic-history__stage-index {
top: 12px !important;
left: 9px !important;
font-size: 7px !important;
}
.biconic-history__stage-year {
font-size:
clamp(
19px,
6.6vw,
27px
) !important;
line-height: .9 !important;
letter-spacing: -.04em !important;
overflow-wrap: anywhere;
}
.biconic-history__stage-label {
margin-top: 8px !important;
font-size: 7px !important;
line-height: 1.05 !important;
letter-spacing: .02em !important;
}
.biconic-history__rail {
width: 22px !important;
}
/* rechte Karte im Fokus */
.biconic-history__card {
min-height: 330px !important;
grid-template-rows:
auto
auto
minmax(105px, 1fr) !important;
padding:
15px
13px !important;
}
.biconic-history__card-year {
font-size:
clamp(
17px,
5vw,
22px
) !important;
}
.biconic-history__card-counter {
font-size: 7px !important;
}
.biconic-history__card-body h3 {
font-size:
clamp(
17px,
5vw,
22px
) !important;
}
.biconic-history__card-body p {
font-size:
clamp(
11.5px,
3.3vw,
13.5px
) !important;
line-height: 1.38 !important;
}
.biconic-history__card-visual {
min-height: 105px !important;
}
/* Flagge auf Mobile vereinfacht */
.history-scene--flag {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 9px !important;
}
.history-flag-wrap {
width: min(100%, 170px);
margin: 0 auto;
}
.history-flag-legend {
display: none !important;
}
.history-flag-credit {
font-size: 8px !important;
}
.history-date-assembly {
font-size:
clamp(
17px,
5.2vw,
24px
) !important;
}
.history-office-symbol {
width: 92px;
height: 82px;
}
.office-door {
width: 26px;
height: 40px;
}
.office-window {
width: 16px;
height: 16px;
top: 28px;
}
.office-sign {
font-size: 14px;
}
}
/* =========================================================
SECTION 05 · v31
MOBILE: Fullscreen-Anordnung wie Referenz
Timeline links · großes Jahr oben · Karte darunter
========================================================= */
@media (max-width: 760px) {
/*
* Die Story darf auf Mobile die komplette Bildschirmbreite nutzen.
* Intro/Outro bleiben weiterhin in der normalen Inhaltsbreite.
*/
.biconic-history__story {
width: 100vw !important;
margin-left:
calc(
50% - 50vw
) !important;
padding:
0 10px !important;
box-sizing: border-box !important;
}
.biconic-history__sticky-shell {
top:
calc(
var(--biconic-nav-top, 0px)
+ 58px
) !important;
min-height: 0 !important;
height:
calc(
100svh
- var(--biconic-nav-top, 0px)
- 72px
) !important;
display: flex !important;
align-items: stretch !important;
}
/*
* Mobile-Stage:
*
* | Timeline | großes Jahr / Label |
* | Timeline | Inhaltskarte |
*
* Dadurch wird fast der gesamte Screen genutzt.
*/
.biconic-history__stage {
width: 100% !important;
height: 100% !important;
display: grid !important;
grid-template-columns:
34px
minmax(0, 1fr) !important;
grid-template-rows:
minmax(104px, 22%)
minmax(0, 78%) !important;
gap:
8px
8px !important;
align-items: stretch !important;
}
/* ======================================================
LINKE VERTIKALE TIMELINE
====================================================== */
.biconic-history__rail {
grid-column: 1 !important;
grid-row: 1 / 3 !important;
width: 34px !important;
min-height: 0 !important;
height: 100% !important;
align-self: stretch !important;
}
.biconic-history__rail-base,
.biconic-history__rail-progress {
top: 16px !important;
bottom: 16px !important;
width: 4px !important;
}
.biconic-history__rail-dot {
width: 15px !important;
height: 15px !important;
border-width: 2px !important;
}
.biconic-history__rail-dot.is-passed,
.biconic-history__rail-dot.is-active {
box-shadow:
0 0 0 6px
color-mix(
in srgb,
var(--bi-purple) 12%,
transparent
) !important;
}
/* ======================================================
OBERER JAHR-BEREICH
====================================================== */
.biconic-history__year-panel {
grid-column: 2 !important;
grid-row: 1 !important;
min-height: 0 !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding:
8px
14px
8px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
}
.biconic-history__stage-index {
position: static !important;
margin-bottom: 2px !important;
font-size: 7px !important;
}
/*
* Groß genug für die visuelle Wirkung,
* aber deutlich kleiner als zuvor und nicht mehr abgeschnitten.
*/
.biconic-history__stage-year {
width: 100% !important;
margin: 0 !important;
font-size:
clamp(
38px,
13.5vw,
62px
) !important;
line-height: .82 !important;
letter-spacing: -.065em !important;
white-space: nowrap !important;
overflow: visible !important;
overflow-wrap: normal !important;
}
.biconic-history__stage-label {
margin-top: 5px !important;
font-size: 9px !important;
line-height: 1 !important;
letter-spacing: .10em !important;
white-space: nowrap !important;
}
/* ======================================================
RECHTE INHALTSKARTE
====================================================== */
.biconic-history__card {
grid-column: 2 !important;
grid-row: 2 !important;
min-height: 0 !important;
height: 100% !important;
display: grid !important;
grid-template-rows:
auto
auto
minmax(110px, 1fr) !important;
gap: 10px !important;
padding:
14px
13px
13px !important;
border-radius: 18px !important;
overflow: hidden !important;
}
.biconic-history__card-head {
min-width: 0 !important;
}
/*
* Kleine Jahreszahl auf der Karte – Fokus bleibt oben
* beim großen Jahr.
*/
.biconic-history__card-year {
font-size:
clamp(
15px,
4.6vw,
20px
) !important;
line-height: 1 !important;
}
.biconic-history__card-counter {
font-size: 7px !important;
}
.biconic-history__card-body {
min-width: 0 !important;
}
.biconic-history__card-body h3 {
margin-bottom: 7px !important;
font-size:
clamp(
18px,
5.4vw,
24px
) !important;
line-height: 1.03 !important;
}
.biconic-history__card-body p {
font-size:
clamp(
12px,
3.45vw,
14px
) !important;
line-height: 1.39 !important;
}
.biconic-history__card-visual {
min-height: 110px !important;
height: 100% !important;
border-radius: 13px !important;
}
/* ======================================================
1999 DATUM: auf Mobile größer und mittig
====================================================== */
.history-date-assembly {
width: 100% !important;
font-size:
clamp(
22px,
7.2vw,
34px
) !important;
letter-spacing: -.045em !important;
}
.history-date-year {
right: 10px !important;
bottom: 8px !important;
font-size: 8px !important;
}
/* ======================================================
FLAGGE
====================================================== */
.history-scene--flag {
display: block !important;
padding: 8px !important;
}
.history-flag-wrap {
width:
min(
100%,
190px
) !important;
margin:
0
auto
12px !important;
}
.history-flag-credit {
position: static !important;
margin: 0 !important;
font-size: 8px !important;
}
/* ======================================================
FACHSTELLE
====================================================== */
.history-office-symbol {
width: 94px !important;
height: 82px !important;
}
.history-office-label {
bottom: 6px !important;
font-size: 8px !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.biconic-history__story {
padding:
0 7px !important;
}
.biconic-history__stage {
grid-template-columns:
30px
minmax(0, 1fr) !important;
column-gap: 6px !important;
}
.biconic-history__rail {
width: 30px !important;
}
.biconic-history__stage-year {
font-size:
clamp(
34px,
12.5vw,
50px
) !important;
}
.biconic-history__card {
padding:
12px
11px !important;
}
.biconic-history__card-body h3 {
font-size: 17px !important;
}
.biconic-history__card-body p {
font-size: 11.3px !important;
}
.history-date-assembly {
font-size: 20px !important;
}
}
/* =========================================================
SECTION 05 · v32
Sticky beginnt exakt UNTER der BICONIC-Navigation
========================================================= */
.biconic-history {
}
.biconic-history__sticky-shell {
top:
var(
--history-sticky-top
) !important;
}
/* Mobile: kein zusätzlicher geratenen Offset mehr */
@media (max-width: 760px) {
.biconic-history__sticky-shell {
top:
var(
--history-sticky-top
) !important;
height:
calc(
100svh
- var(--history-sticky-top)
- 12px
) !important;
min-height: 0 !important;
}
/*
* Das große Jahr startet jetzt innerhalb des verbleibenden
* sichtbaren Bereichs und wird nicht mehr von der Navigation verdeckt.
*/
.biconic-history__stage {
height: 100% !important;
grid-template-rows:
minmax(92px, 20%)
minmax(0, 80%) !important;
}
}
/* Sehr kleine Geräte */
@media (max-width: 390px) {
.biconic-history__sticky-shell {
height:
calc(
100svh
- var(--history-sticky-top)
- 8px
) !important;
}
}
/* =========================================================
SECTION 05 · v33
Desktop höher / 01 Jahr / Ost-West / Vernetzung / Flagge
========================================================= */
/* Gesamter Sticky-Bereich auf Desktop etwas höher positionieren */
@media (min-width: 981px) {
.biconic-history {
}
.biconic-history__sticky-shell {
top:
var(--history-sticky-top) !important;
min-height:
calc(
100svh
- var(--history-sticky-top)
- 22px
) !important;
}
}
/* Karte 01: lange Jahreszahl links besser einpassen */
.biconic-history__stage-year {
max-width: 100% !important;
}
.biconic-history__stage-year[data-long-year="true"] {
font-size:
clamp(
44px,
5.4vw,
80px
) !important;
line-height: .9 !important;
}
/* =========================================================
1988 · OST / WEST
je Seite nur ein Punkt, Trennlinie als Berliner Grenze
========================================================= */
.history-scene--eastwest {
display: grid !important;
grid-template-columns:
1fr
5px
1fr;
align-items: center;
padding: 16px 22px !important;
}
.eastwest-side {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 100%;
}
.eastwest-side--east {
grid-column: 1;
}
.eastwest-side--west {
grid-column: 3;
}
.eastwest-border {
grid-column: 2;
align-self: stretch;
width: 5px;
border-radius: 999px;
background:
linear-gradient(
180deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
transform:
scaleY(
calc(
.12 +
var(--scene-progress) * .88
)
);
transform-origin: center center;
opacity:
calc(
.18 +
var(--scene-progress) * .82
);
}
.history-scene--eastwest .eastwest-node {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 22px !important;
height: 22px !important;
transform:
scale(
calc(
.55 +
var(--scene-progress) * .45
)
) !important;
opacity:
calc(
.15 +
var(--scene-progress) * .85
) !important;
}
.history-scene--eastwest .eastwest-label {
position: static !important;
transform: none !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .16em !important;
opacity:
calc(
.30 +
var(--scene-progress) * .70
) !important;
}
/* =========================================================
1991 · VERNETZUNG
bestehende Punkte werden untereinander verbunden
========================================================= */
.history-scene--network .network-node {
width: 15px !important;
height: 15px !important;
opacity:
calc(
.18 +
var(--scene-progress) * .82
) !important;
}
/* feste Punkte */
.network-node--1 { left: 14% !important; top: 22% !important; }
.network-node--2 { left: 48% !important; top: 16% !important; }
.network-node--3 { right: 14% !important; top: 24% !important; }
.network-node--4 { left: 24% !important; bottom: 18% !important; }
.network-node--5 { left: 52% !important; bottom: 24% !important; transform: none !important; }
.network-node--6 { right: 18% !important; bottom: 16% !important; }
/*
* Mesh: keine "Stern"-Struktur aus einem Mittelpunkt,
* sondern Verbindungen zwischen mehreren vorhandenen Punkten.
*/
.history-scene--network .network-link {
height: 3px !important;
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
) !important;
opacity:
calc(
.05 +
var(--scene-progress) * .95
) !important;
transform-origin: left center;
}
.network-link--1 { left: 16%; top: 26%; width: 35%; transform: rotate(-10deg) scaleX(var(--scene-progress)); }
.network-link--2 { left: 49%; top: 20%; width: 34%; transform: rotate(10deg) scaleX(var(--scene-progress)); }
.network-link--3 { left: 18%; top: 28%; width: 28%; transform: rotate(48deg) scaleX(var(--scene-progress)); }
.network-link--4 { left: 31%; bottom: 24%; width: 25%; transform: rotate(-13deg) scaleX(var(--scene-progress)); }
.network-link--5 { left: 54%; bottom: 28%; width: 28%; transform: rotate(12deg) scaleX(var(--scene-progress)); }
.network-link--6 { left: 49%; top: 21%; width: 40%; transform: rotate(54deg) scaleX(var(--scene-progress)); }
.network-link--7 { left: 26%; bottom: 24%; width: 57%; transform: rotate(-2deg) scaleX(var(--scene-progress)); }
.network-link--8 { left: 17%; top: 27%; width: 64%; transform: rotate(25deg) scaleX(var(--scene-progress)); }
.network-link--9 { left: 50%; top: 23%; width: 34%; transform: rotate(78deg) scaleX(var(--scene-progress)); }
.network-link--10 { left: 27%; bottom: 22%; width: 55%; transform: rotate(-28deg) scaleX(var(--scene-progress)); }
/* =========================================================
1998 · FLAGGE
Beschreibung enthält Erklärung / Attribution,
Animation selbst bleibt visuell und auf Mobile zentriert.
========================================================= */
.history-scene--flag {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px !important;
}
.history-flag-wrap {
width:
min(
88%,
360px
) !important;
margin: 0 auto !important;
aspect-ratio: 5 / 3 !important;
}
/* Mobile: Flagge wirklich mittig im Animationsfeld */
@media (max-width: 760px) {
.history-scene--flag {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px !important;
}
.history-flag-wrap {
width:
min(
92%,
190px
) !important;
margin: 0 auto !important;
}
}
/* =========================================================
MOBILE · Linke Jahresanzeige kompakter
========================================================= */
@media (max-width: 760px) {
.biconic-history__stage-year {
font-size:
clamp(
28px,
9vw,
44px
) !important;
}
.biconic-history__stage-year[data-long-year="true"] {
font-size:
clamp(
22px,
7vw,
34px
) !important;
}
}
/* =========================================================
SECTION 05 · v35
Mehr Abstand unter Navigation + 1970er/80er kleiner
========================================================= */
/* Desktop / Tablet: etwas mehr Luft unter der BICONIC-Navigation */
@media (min-width: 761px) {
.biconic-history {
}
}
/* Mobile: ebenfalls etwas mehr Abstand */
@media (max-width: 760px) {
.biconic-history {
}
}
/*
* Erste Station 1970er/80er:
* bewusst deutlich kleiner als die kurzen vierstelligen Jahreszahlen.
*/
.biconic-history__stage-year[data-long-year="true"] {
font-size:
clamp(
36px,
4.7vw,
68px
) !important;
line-height: .92 !important;
letter-spacing: -.05em !important;
}
/* Mobile: nochmals kompakter */
@media (max-width: 760px) {
.biconic-history__stage-year[data-long-year="true"] {
font-size:
clamp(
18px,
5.8vw,
27px
) !important;
line-height: .95 !important;
}
}
/* =========================================================
SECTION 05 · v36
1970er/80er kleiner + Vernetzung verbindet Punkte sauber
========================================================= */
/* ---------------------------------------------------------
01 · 1970er/80er
deutlich kleiner in der linken Karte
--------------------------------------------------------- */
.biconic-history__stage-year[data-long-year="true"] {
font-size:
clamp(
30px,
3.8vw,
56px
) !important;
line-height: .94 !important;
letter-spacing: -.045em !important;
white-space: nowrap !important;
}
/* Mobile nochmals kleiner */
@media (max-width: 760px) {
.biconic-history__stage-year[data-long-year="true"] {
font-size:
clamp(
16px,
5vw,
23px
) !important;
line-height: .96 !important;
}
}
/* ---------------------------------------------------------
03 · Vernetzung wächst
Punkte und Linien exakt aufeinander abgestimmt
--------------------------------------------------------- */
.history-scene--network {
position: relative !important;
}
/*
* Feste Knotenpositionen
* Die Verbindungslinien unten sind exakt auf diese Positionen
* abgestimmt und enden jeweils an einem Knoten.
*/
.history-scene--network .network-node--1 {
left: 14% !important;
top: 22% !important;
}
.history-scene--network .network-node--2 {
left: 48% !important;
top: 16% !important;
}
.history-scene--network .network-node--3 {
right: 14% !important;
top: 24% !important;
}
.history-scene--network .network-node--4 {
left: 24% !important;
bottom: 18% !important;
}
.history-scene--network .network-node--5 {
left: 52% !important;
bottom: 24% !important;
transform: none !important;
}
.history-scene--network .network-node--6 {
right: 18% !important;
bottom: 16% !important;
}
/*
* Alle Linien starten an einem Knoten und enden an einem anderen.
* Kein "ins Leere laufen" mehr.
*/
.history-scene--network .network-link {
height: 3px !important;
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
) !important;
opacity:
calc(
.10 +
var(--scene-progress) * .90
) !important;
transform-origin: left center !important;
}
/* node 1 → node 2 */
.history-scene--network .network-link--1 {
left: 15.5% !important;
top: 25% !important;
width: 33.5% !important;
transform:
rotate(-10deg)
scaleX(var(--scene-progress)) !important;
}
/* node 2 → node 3 */
.history-scene--network .network-link--2 {
left: 49.5% !important;
top: 20% !important;
width: 35.5% !important;
transform:
rotate(9deg)
scaleX(var(--scene-progress)) !important;
}
/* node 1 → node 4 */
.history-scene--network .network-link--3 {
left: 15.5% !important;
top: 25% !important;
width: 39% !important;
transform:
rotate(54deg)
scaleX(var(--scene-progress)) !important;
}
/* node 2 → node 5 */
.history-scene--network .network-link--4 {
left: 49.5% !important;
top: 20% !important;
width: 50% !important;
transform:
rotate(87deg)
scaleX(var(--scene-progress)) !important;
}
/* node 3 → node 6 */
.history-scene--network .network-link--5 {
left: 85% !important;
top: 27% !important;
width: 43% !important;
transform:
rotate(112deg)
scaleX(var(--scene-progress)) !important;
}
/* node 4 → node 5 */
.history-scene--network .network-link--6 {
left: 25.5% !important;
top: 78% !important;
width: 28% !important;
transform:
rotate(-11deg)
scaleX(var(--scene-progress)) !important;
}
/* node 5 → node 6 */
.history-scene--network .network-link--7 {
left: 53.5% !important;
top: 74% !important;
width: 29.5% !important;
transform:
rotate(10deg)
scaleX(var(--scene-progress)) !important;
}
/* node 1 → node 5 */
.history-scene--network .network-link--8 {
left: 15.5% !important;
top: 25% !important;
width: 55% !important;
transform:
rotate(36deg)
scaleX(var(--scene-progress)) !important;
}
/* node 2 → node 4 */
.history-scene--network .network-link--9 {
left: 49.5% !important;
top: 20% !important;
width: 62% !important;
transform:
rotate(139deg)
scaleX(var(--scene-progress)) !important;
}
/* node 3 → node 5 */
.history-scene--network .network-link--10 {
left: 85% !important;
top: 27% !important;
width: 53% !important;
transform:
rotate(151deg)
scaleX(var(--scene-progress)) !important;
}
/* Mobile: Netz etwas kompakter, Linien bleiben an Punkten */
@media (max-width: 760px) {
.history-scene--network .network-node {
width: 12px !important;
height: 12px !important;
}
.history-scene--network .network-link {
height: 2px !important;
}
}
/* =========================================================
SECTION 05 · v37
VERNETZUNG: Punkte über das ganze Feld + vollständiges Netz
========================================================= */
.history-scene--network {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 12px !important;
overflow: hidden !important;
}
.history-network-svg {
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
/*
* Jede Linie verbindet zwei reale Punkte.
* Bei 8 Punkten entstehen 28 Verbindungen:
* also ein vollständiges Netz ohne Linien, die "ins Leere" laufen.
*/
.history-network-lines line {
fill: none;
stroke: url(#history-network-gradient);
stroke-width: 1.35;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
opacity:
calc(
.08 +
var(--scene-progress) * .72
);
stroke-dasharray: 1;
stroke-dashoffset:
calc(
1 -
var(--scene-progress)
);
transition:
opacity .14s linear,
stroke-dashoffset .14s linear;
}
/* Punkte über die komplette Fläche verteilt */
.network-svg-node {
opacity:
calc(
.15 +
var(--scene-progress) * .85
);
transform-box: fill-box;
transform-origin: center;
transition:
opacity .15s linear;
}
.network-svg-halo {
fill:
color-mix(
in srgb,
#9b4f96 14%,
transparent
);
opacity:
calc(
.25 +
var(--scene-progress) * .50
);
}
.network-svg-dot {
fill: url(#history-network-dot-gradient);
stroke:
color-mix(
in srgb,
#ffffff 78%,
transparent
);
stroke-width: .55;
vector-effect: non-scaling-stroke;
}
/*
* Beim Scrollen wachsen die Punkte leicht ein.
* Das Netz entsteht gleichzeitig sichtbar zwischen ihnen.
*/
.history-scene--network.is-active .network-svg-node {
animation:
none !important;
}
/* Frühere absolut positionierte Netzwerk-Elemente sicher neutralisieren */
.history-scene--network > .network-node,
.history-scene--network > .network-link {
display: none !important;
}
/* Tablet */
@media (max-width: 980px) {
.history-network-lines line {
stroke-width: 1.2;
}
}
/* Mobile: komplette Fläche weiterhin ausnutzen */
@media (max-width: 760px) {
.history-scene--network {
padding: 6px !important;
}
.history-network-svg {
width: 100% !important;
height: 100% !important;
}
.history-network-lines line {
stroke-width: 1.05;
}
.network-svg-halo {
r: 4.4;
}
.network-svg-dot {
r: 2;
}
}
/* =========================================================
SECTION 05 · v38
1998 Flagge: Bedeutung links + Count-Up
========================================================= */
.history-scene--flag {
display: grid !important;
grid-template-columns:
minmax(220px, .95fr)
minmax(220px, 1.05fr) !important;
gap: 24px !important;
align-items: center !important;
padding: 18px !important;
}
/* Linke Informationsspalte */
.history-flag-info {
display: flex;
flex-direction: column;
gap: 12px;
}
.history-flag-info-card {
display: grid;
grid-template-columns:
48px
minmax(0, 1fr);
gap: 14px;
align-items: center;
padding:
13px
15px;
border:
1px solid
var(--border-color);
border-radius: 15px;
background:
color-mix(
in srgb,
var(--card-bg) 94%,
transparent
);
box-shadow:
0 8px 20px
rgba(0,0,0,.035);
opacity:
calc(
.16 +
var(--scene-progress) * .84
);
transform:
translate3d(
calc(
(
1 - var(--scene-progress)
) * -24px
),
0,
0
);
}
.history-flag-info-card:nth-child(2) {
transition-delay: 80ms;
}
.history-flag-info-card:nth-child(3) {
transition-delay: 160ms;
}
.history-flag-swatch {
width: 48px;
height: 48px;
border-radius: 14px;
box-shadow:
0 8px 18px
rgba(0,0,0,.08);
}
.history-flag-swatch--pink {
background: #d60270;
}
.history-flag-swatch--purple {
background: #9b4f96;
}
.history-flag-swatch--blue {
background: #0038a8;
}
.history-flag-info-copy {
display: flex;
flex-direction: column;
min-width: 0;
}
.history-flag-info-copy strong {
color: var(--primary-color);
font-size:
clamp(
15px,
1.15vw,
18px
);
font-weight: 600;
line-height: 1.08;
}
.history-flag-info-copy small {
margin-top: 3px;
color: var(--text-muted);
font-size:
clamp(
11px,
.92vw,
14px
);
line-height: 1.22;
}
/* Rechte Flagge */
.history-scene--flag .history-flag-wrap {
width: min(100%, 360px) !important;
margin: 0 auto !important;
aspect-ratio: 5 / 3 !important;
}
/*
* Streifen nach den vom Nutzer gewünschten Anteilen:
* Pink 55 %, Lila 20 %, Blau 25 %.
*/
.history-scene--flag .flag-band--pink {
height: 55% !important;
flex: none !important;
background: #d60270 !important;
}
.history-scene--flag .flag-band--purple {
height: 20% !important;
flex: none !important;
background: #9b4f96 !important;
}
.history-scene--flag .flag-band--blue {
height: 25% !important;
flex: none !important;
background: #0038a8 !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 980px) {
.history-scene--flag {
grid-template-columns:
minmax(180px, .95fr)
minmax(180px, 1.05fr) !important;
gap: 16px !important;
padding: 14px !important;
}
.history-flag-info-card {
grid-template-columns:
38px
minmax(0, 1fr);
gap: 10px;
padding:
10px
11px;
}
.history-flag-swatch {
width: 38px;
height: 38px;
border-radius: 11px;
}
.history-flag-info-copy strong {
font-size: 14px;
}
.history-flag-info-copy small {
font-size: 11px;
}
}
/* =========================================================
MOBILE
Infos links, Flagge rechts; beides zentriert im Animationsfeld
========================================================= */
@media (max-width: 760px) {
.history-scene--flag {
display: grid !important;
grid-template-columns:
minmax(100px, .95fr)
minmax(110px, 1.05fr) !important;
gap: 8px !important;
align-items: center !important;
padding: 7px !important;
}
.history-flag-info {
gap: 5px;
}
.history-flag-info-card {
grid-template-columns:
22px
minmax(0, 1fr);
gap: 6px;
padding:
5px
6px;
border-radius: 9px;
box-shadow: none;
}
.history-flag-swatch {
width: 22px;
height: 22px;
border-radius: 6px;
box-shadow: none;
}
.history-flag-info-copy strong {
font-size: 9px;
line-height: 1.05;
}
.history-flag-info-copy small {
margin-top: 1px;
font-size: 7px;
line-height: 1.1;
}
.history-scene--flag .history-flag-wrap {
width: 100% !important;
max-width: 150px !important;
margin: 0 auto !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.history-scene--flag {
grid-template-columns:
minmax(92px, .95fr)
minmax(96px, 1.05fr) !important;
gap: 6px !important;
}
.history-flag-info-copy strong {
font-size: 8.5px;
}
.history-flag-info-copy small {
font-size: 6.5px;
}
}
/* =========================================================
SECTION 05 · v39 FIX
DOM repariert + Animationen sofort erkennbar
========================================================= */
/*
* Aktive Szene nie nahezu unsichtbar starten lassen.
* Die Animation baut sich weiterhin auf, aber die Grundidee
* bleibt jederzeit sichtbar.
*/
.history-scene.is-active {
opacity: 1 !important;
}
.history-scene--groups .history-node {
opacity:
calc(
.34 +
var(--scene-progress) * .66
) !important;
}
.history-scene--network .network-svg-node {
opacity:
calc(
.40 +
var(--scene-progress) * .60
) !important;
}
.history-network-lines line {
opacity:
calc(
.16 +
var(--scene-progress) * .68
) !important;
}
/* Flaggen-Infos sollen beim Aktivieren sofort lesbar sein */
.history-scene--flag .history-flag-info-card {
opacity:
calc(
.50 +
var(--scene-progress) * .50
) !important;
}
/* Mobile ebenfalls nicht zu blass */
@media (max-width: 760px) {
.history-scene--groups .history-node,
.history-scene--network .network-svg-node {
opacity:
calc(
.45 +
var(--scene-progress) * .55
) !important;
}
}
/* =========================================================
SECTION 05 · v40
1999 / 23. SEPTEMBER – neue Bi+-Typografieanimation
========================================================= */
.history-scene--date {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding:
clamp(
18px,
3vw,
30px
) !important;
overflow: hidden !important;
background:
radial-gradient(
circle at 50% 50%,
color-mix(
in srgb,
var(--bi-purple) 7%,
transparent
),
transparent 62%
) !important;
}
/*
* Statt Outline-Schrift:
* voll gefüllte Buchstaben in Bi+-Farben.
*/
.history-date-stack {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap:
clamp(
4px,
.8vw,
10px
);
text-align: center;
}
.history-date-day {
display: flex;
align-items: baseline;
justify-content: center;
gap: .02em;
font-size:
clamp(
58px,
8vw,
112px
);
font-weight: 700;
line-height: .78;
letter-spacing: -.075em;
}
.history-date-word {
display: flex;
align-items: center;
justify-content: center;
gap:
clamp(
1px,
.28vw,
5px
);
width: 100%;
font-size:
clamp(
28px,
4.2vw,
58px
);
font-weight: 700;
line-height: .9;
letter-spacing: -.045em;
white-space: nowrap;
}
/*
* Die einzelnen Zeichen setzen sich beim Scrollen zusammen.
* Jedes Zeichen hat eine leicht andere Startposition.
*/
.history-date-char,
.history-date-dot {
display: inline-block;
background:
linear-gradient(
135deg,
var(--bi-pink) 0%,
var(--bi-purple) 50%,
var(--bi-blue) 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
opacity:
calc(
.18 +
var(--scene-progress) * .82
);
filter:
blur(
calc(
(1 - var(--scene-progress)) * 8px
)
);
transform:
translate3d(
calc(
(
1 - var(--scene-progress)
) *
(
(
var(--char-i, 0) - 5
) * 9px
)
),
calc(
(
1 - var(--scene-progress)
) *
(
26px -
var(--char-i, 0) * 3px
)
),
0
)
rotate(
calc(
(
1 - var(--scene-progress)
) *
(
-8deg +
var(--char-i, 0) * 1.4deg
)
)
)
scale(
calc(
.78 +
var(--scene-progress) * .22
)
);
transition:
opacity .12s linear,
filter .12s linear,
transform .12s linear;
will-change:
transform,
opacity,
filter;
}
/* 23 stärker gewichten */
.history-date-day .history-date-char:nth-child(1) {
--char-i: 0;
}
.history-date-day .history-date-char:nth-child(2) {
--char-i: 1;
}
/* Punkt hinter 23 */
.history-date-dot {
--char-i: 1.5;
margin-left: .02em;
}
/*
* Nach dem Zusammensetzen bekommt der Schriftzug
* einen ruhigen leichten Lift statt weiter herumzufliegen.
*/
.history-scene--date.is-active .history-date-stack {
transform:
translate3d(
0,
calc(
(
1 - var(--scene-progress)
) * 10px
),
0
);
will-change: transform;
}
.history-date-year {
position: absolute;
left: 50%;
bottom:
clamp(
10px,
1.5vw,
18px
);
transform:
translateX(-50%);
width: max-content;
color: var(--text-muted) !important;
font-size:
clamp(
9px,
.9vw,
12px
) !important;
font-weight: 600 !important;
letter-spacing: .16em !important;
opacity:
calc(
.20 +
var(--scene-progress) * .80
);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 980px) {
.history-date-day {
font-size:
clamp(
52px,
8vw,
86px
);
}
.history-date-word {
font-size:
clamp(
25px,
4.3vw,
44px
);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.history-scene--date {
padding:
9px
7px
18px !important;
}
.history-date-stack {
gap: 3px;
}
.history-date-day {
font-size:
clamp(
38px,
13vw,
58px
);
}
.history-date-word {
font-size:
clamp(
15px,
4.7vw,
22px
);
gap: 1px;
}
.history-date-char,
.history-date-dot {
filter:
blur(
calc(
(1 - var(--scene-progress)) * 5px
)
);
transform:
translate3d(
calc(
(
1 - var(--scene-progress)
) *
(
(
var(--char-i, 0) - 5
) * 4px
)
),
calc(
(
1 - var(--scene-progress)
) * 13px
),
0
)
scale(
calc(
.84 +
var(--scene-progress) * .16
)
);
}
.history-date-year {
bottom: 6px;
font-size: 7px !important;
letter-spacing: .10em !important;
}
}
/* =========================================================
SECTION 05 · v42
23. SEPTEMBER: 3 nicht abschneiden + Mobile deutlich größer
========================================================= */
/*
* Der 23.-Block bekommt mehr Innenraum und darf nicht clippen.
*/
.history-scene--date {
overflow: visible !important;
}
.history-date-stack,
.history-date-day,
.history-date-word {
overflow: visible !important;
}
/*
* Punkt nach der 23 nicht mehr zu dicht an der 3.
* Außerdem etwas weniger negatives Letter-Spacing bei der Zahl.
*/
.history-date-day {
letter-spacing: -.045em !important;
padding:
0
.08em !important;
}
.history-date-dot {
margin-left: .06em !important;
}
/*
* Einzelne Zeichen nicht mehr so weit horizontal verschieben,
* damit insbesondere die 3 während der Animation nicht abgeschnitten wird.
*/
.history-date-char,
.history-date-dot {
transform:
translate3d(
calc(
(
1 - var(--scene-progress)
) *
(
(
var(--char-i, 0) - 5
) * 6px
)
),
calc(
(
1 - var(--scene-progress)
) *
(
22px -
var(--char-i, 0) * 2px
)
),
0
)
rotate(
calc(
(
1 - var(--scene-progress)
) *
(
-6deg +
var(--char-i, 0) * 1deg
)
)
)
scale(
calc(
.82 +
var(--scene-progress) * .18
)
) !important;
}
/* =========================================================
MOBILE: Animationsfläche stärker ausnutzen
========================================================= */
@media (max-width: 760px) {
.history-scene--date {
padding:
4px
4px
12px !important;
align-items: center !important;
justify-content: center !important;
}
.history-date-stack {
width: 100% !important;
height: 100% !important;
justify-content: center !important;
gap: 2px !important;
}
.history-date-day {
font-size:
clamp(
54px,
18vw,
82px
) !important;
line-height: .78 !important;
}
.history-date-word {
width: 100% !important;
font-size:
clamp(
22px,
7vw,
34px
) !important;
line-height: .86 !important;
letter-spacing: -.035em !important;
gap: 0 !important;
}
.history-date-char,
.history-date-dot {
filter:
blur(
calc(
(1 - var(--scene-progress)) * 3px
)
) !important;
transform:
translate3d(
calc(
(
1 - var(--scene-progress)
) *
(
(
var(--char-i, 0) - 5
) * 2px
)
),
calc(
(
1 - var(--scene-progress)
) * 8px
),
0
)
scale(
calc(
.90 +
var(--scene-progress) * .10
)
) !important;
}
.history-date-year {
bottom: 4px !important;
font-size: 6.5px !important;
letter-spacing: .08em !important;
}
}
/* Sehr schmale Smartphones */
@media (max-width: 390px) {
.history-date-day {
font-size: 50px !important;
}
.history-date-word {
font-size: 20px !important;
}
}
/* =========================================================
SECTION 05 · v43
MOBILE 1998: Infos oben, Flagge unten, Feld ausfüllen
========================================================= */
@media (max-width: 760px) {
/*
* Das Animationsfeld für 1998 wird auf Mobile vertikal aufgebaut:
* oben die drei Bedeutungen, unten groß die Flagge.
*/
.history-scene--flag {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows:
auto
minmax(0, 1fr) !important;
gap: 10px !important;
align-items: stretch !important;
justify-items: stretch !important;
padding:
9px
8px
10px !important;
}
/* -------------------------------------------------------
INFO-KARTEN OBEN
------------------------------------------------------- */
.history-flag-info {
grid-row: 1;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 6px !important;
width: 100% !important;
align-self: start !important;
}
.history-flag-info-card {
width: 100% !important;
grid-template-columns:
24px
minmax(0, 1fr) !important;
gap: 7px !important;
padding:
6px
7px !important;
border-radius: 9px !important;
box-sizing: border-box !important;
}
.history-flag-swatch {
width: 24px !important;
height: 24px !important;
border-radius: 7px !important;
}
.history-flag-info-copy strong {
font-size:
clamp(
9.5px,
2.8vw,
11.5px
) !important;
line-height: 1.05 !important;
}
.history-flag-info-copy small {
margin-top: 1px !important;
font-size:
clamp(
7px,
2.1vw,
8.5px
) !important;
line-height: 1.08 !important;
}
/* -------------------------------------------------------
FLAGGE UNTEN
------------------------------------------------------- */
.history-scene--flag .history-flag-wrap {
grid-row: 2;
align-self: stretch !important;
justify-self: stretch !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
aspect-ratio: auto !important;
border-radius: 12px !important;
}
/*
* Die Flagge füllt den unteren Bereich vollständig aus.
*/
.history-scene--flag .flag-band {
width: 100% !important;
}
/* -------------------------------------------------------
Gesamtes Visual-Feld auf Mobile besser ausnutzen
------------------------------------------------------- */
.biconic-history__card-visual {
min-height:
clamp(
220px,
42vh,
360px
) !important;
height: 100% !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.history-scene--flag {
gap: 7px !important;
padding:
7px
6px
8px !important;
}
.history-flag-info {
gap: 4px !important;
}
.history-flag-info-card {
grid-template-columns:
22px
minmax(0, 1fr) !important;
gap: 6px !important;
padding:
5px
6px !important;
}
.history-flag-swatch {
width: 22px !important;
height: 22px !important;
}
.history-flag-info-copy strong {
font-size: 9px !important;
}
.history-flag-info-copy small {
font-size: 6.8px !important;
}
.biconic-history__card-visual {
min-height:
clamp(
205px,
39vh,
320px
) !important;
}
}
/* =========================================================
SECTION 05 · v44
2024 / Fachstelle – zwei Formen verschmelzen
========================================================= */
.history-scene--future {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding:
clamp(
16px,
3vw,
28px
) !important;
overflow: hidden !important;
}
.history-merge-stage {
position: relative;
width:
min(
100%,
520px
);
height: 100%;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
/* Ausgangsformen */
.merge-shape {
position: absolute;
top: 50%;
width:
clamp(
88px,
10vw,
138px
);
aspect-ratio: 1;
border-radius: 50%;
transform:
translateY(-50%);
opacity:
calc(
.30 +
var(--scene-progress) * .70
);
filter:
blur(
calc(
(1 - var(--scene-progress)) * 3px
)
);
will-change:
transform,
opacity,
filter;
}
/* Pink kommt von links */
.merge-shape--pink {
left:
calc(
50%
- 130px
+ var(--scene-progress) * 72px
);
background:
radial-gradient(
circle at 36% 34%,
#f14b9c 0%,
var(--bi-pink) 58%,
#b7005e 100%
);
box-shadow:
0 14px 32px
color-mix(
in srgb,
var(--bi-pink) 18%,
transparent
);
}
/* Blau kommt von rechts */
.merge-shape--blue {
right:
calc(
50%
- 130px
+ var(--scene-progress) * 72px
);
background:
radial-gradient(
circle at 34% 34%,
#728cff 0%,
var(--bi-blue) 58%,
#2040b8 100%
);
box-shadow:
0 14px 32px
color-mix(
in srgb,
var(--bi-blue) 18%,
transparent
);
}
/*
* Die Überlappung wird beim Scrollen sichtbar:
* visuelle Metapher für Verbindung / neue gemeinsame Struktur.
*/
.merge-overlap {
position: absolute;
left: 50%;
top: 50%;
width:
clamp(
48px,
6vw,
78px
);
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(
circle at 35% 35%,
#b75fc6,
var(--bi-purple)
);
opacity:
clamp(
0,
calc(
(var(--scene-progress) - .28) * 2.2
),
1
);
transform:
translate(-50%, -50%)
scale(
calc(
.45 +
var(--scene-progress) * .55
)
);
box-shadow:
0 0 0
calc(var(--scene-progress) * 8px)
color-mix(
in srgb,
var(--bi-purple) 10%,
transparent
);
}
/*
* Aus der Überlappung entsteht ein neues gemeinsames Symbol.
*/
.merge-result {
position: absolute;
left: 50%;
top: 50%;
width:
clamp(
80px,
8vw,
116px
);
aspect-ratio: 1;
display: grid;
place-items: center;
transform:
translate(-50%, -50%)
scale(
clamp(
0,
calc(
(var(--scene-progress) - .52) * 2.1
),
1
)
);
opacity:
clamp(
0,
calc(
(var(--scene-progress) - .48) * 2.2
),
1
);
will-change:
transform,
opacity;
}
.merge-result-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border:
3px solid
var(--bi-purple);
background:
color-mix(
in srgb,
var(--card-bg) 88%,
transparent
);
box-shadow:
0 12px 30px
rgba(0,0,0,.06);
}
.merge-result-core {
position: relative;
z-index: 1;
background:
linear-gradient(
90deg,
var(--bi-pink),
var(--bi-purple),
var(--bi-blue)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size:
clamp(
20px,
2.4vw,
32px
);
font-weight: 700;
letter-spacing: -.03em;
}
/* kurze inhaltliche Aussage */
.merge-caption {
position: absolute;
left: 50%;
bottom: 6px;
transform:
translateX(-50%)
translateY(
calc(
(1 - var(--scene-progress)) * 8px
)
);
width: max-content;
max-width: 92%;
margin: 0 !important;
color: var(--text-muted) !important;
font-size:
clamp(
10px,
1vw,
13px
) !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-align: center;
opacity:
calc(
.18 +
var(--scene-progress) * .82
);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.history-scene--future {
padding:
8px
6px
18px !important;
}
.history-merge-stage {
width: 100% !important;
height: 100% !important;
min-height: 105px !important;
}
.merge-shape {
width:
clamp(
54px,
18vw,
78px
) !important;
}
.merge-shape--pink {
left:
calc(
50%
- 70px
+ var(--scene-progress) * 38px
) !important;
}
.merge-shape--blue {
right:
calc(
50%
- 70px
+ var(--scene-progress) * 38px
) !important;
}
.merge-overlap {
width:
clamp(
34px,
11vw,
48px
) !important;
}
.merge-result {
width:
clamp(
50px,
15vw,
68px
) !important;
}
.merge-result-core {
font-size:
clamp(
15px,
5vw,
20px
) !important;
}
.merge-caption {
bottom: 3px !important;
font-size:
clamp(
7px,
2.2vw,
9px
) !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.merge-shape {
width: 50px !important;
}
.merge-shape--pink {
left:
calc(
50%
- 62px
+ var(--scene-progress) * 34px
) !important;
}
.merge-shape--blue {
right:
calc(
50%
- 62px
+ var(--scene-progress) * 34px
) !important;
}
}
/* =========================================================
SECTION 05 · v45 FIX
2024-Struktur repariert + Merge-Animation sichtbar
========================================================= */
.history-scene--future .merge-shape {
opacity:
calc(
.55 +
var(--scene-progress) * .45
) !important;
}
.history-scene--future .merge-overlap {
opacity:
clamp(
.10,
calc(
.10 +
(var(--scene-progress) - .18) * 1.6
),
1
) !important;
}
/*
* Das neue BI+-Ergebnis erscheint etwas früher,
* damit die Entwicklung beim Scrollen nachvollziehbar bleibt.
*/
.history-scene--future .merge-result {
opacity:
clamp(
0,
calc(
(var(--scene-progress) - .34) * 2.4
),
1
) !important;
transform:
translate(-50%, -50%)
scale(
clamp(
.35,
calc(
.35 +
(var(--scene-progress) - .30) * 1.25
),
1
)
) !important;
}
/* =========================================================
SECTION 05 · v46
Abstand unter Navigation + Abstand zum unteren Viewport
========================================================= */
.biconic-history {
--history-bottom-gap: 24px;
}
/*
* Die reale Oberkante wird per JS aus der Unterkante der
* BICONIC-Navigation + Abstand berechnet.
*
* Der Sticky-Bereich nutzt nur den verbleibenden Viewport
* und lässt unten ebenfalls bewusst Luft.
*/
.biconic-history__sticky-shell {
top:
var(--history-sticky-top) !important;
height:
calc(
100dvh
- var(--history-sticky-top)
- var(--history-bottom-gap)
) !important;
min-height: 0 !important;
align-items: stretch !important;
}
/*
* Stage innerhalb der verfügbaren Höhe zentrieren.
* Dadurch kleben Karten weder an der Navigation noch am unteren Rand.
*/
.biconic-history__stage {
height: 100% !important;
align-self: stretch !important;
align-items: stretch !important;
}
/* =========================================================
DESKTOP
========================================================= */
@media (min-width: 981px) {
.biconic-history__stage {
/*
* Etwas Innenluft innerhalb der Sticky-Höhe.
* Die eigentlichen Karten werden dadurch sichtbar weiter
* unterhalb der Navigation positioniert.
*/
padding:
4px
0
6px !important;
box-sizing: border-box !important;
}
.biconic-history__year-panel,
.biconic-history__card,
.biconic-history__rail {
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
}
}
/* =========================================================
TABLET
========================================================= */
@media (min-width: 761px) and (max-width: 980px) {
.biconic-history {
--history-bottom-gap: 20px;
}
.biconic-history__stage {
padding:
3px
0
5px !important;
box-sizing: border-box !important;
}
.biconic-history__year-panel,
.biconic-history__card,
.biconic-history__rail {
min-height: 0 !important;
height: 100% !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.biconic-history {
--history-bottom-gap: 20px;
}
.biconic-history__sticky-shell {
height:
calc(
100dvh
- var(--history-sticky-top)
- var(--history-bottom-gap)
) !important;
min-height: 0 !important;
}
/*
* Oben bleibt die Jahreszahl, darunter die Karte.
* Etwas Luft oben und unten innerhalb des Sticky-Bereichs.
*/
.biconic-history__stage {
height: 100% !important;
grid-template-rows:
minmax(78px, 17%)
minmax(0, 83%) !important;
padding:
2px
0
4px !important;
box-sizing: border-box !important;
}
.biconic-history__year-panel {
min-height: 0 !important;
height: 100% !important;
}
.biconic-history__rail {
min-height: 0 !important;
height: 100% !important;
}
.biconic-history__card {
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
}
/*
* Das Visual darf den Card-Inhalt nicht über den unteren
* Viewport-Rand hinausdrücken.
*/
.biconic-history__card-visual {
min-height:
clamp(
155px,
28dvh,
250px
) !important;
max-height:
100% !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.biconic-history {
--history-bottom-gap: 16px;
}
.biconic-history__stage {
grid-template-rows:
minmax(68px, 15%)
minmax(0, 85%) !important;
}
.biconic-history__card-visual {
min-height:
clamp(
145px,
25dvh,
220px
) !important;
}
}
/* =========================================================
SECTION 05 · v47
Gesamter Sticky-Bereich exakt im sichtbaren Bereich
zwischen Navigation und unterem Viewport-Rand
========================================================= */
.biconic-history {
--history-viewport-height: 100dvh;
--history-bottom-gap: 12px;
}
/*
* DAS ist jetzt die maßgebliche Höhe:
* Navigation unten -> kleiner Abstand -> komplette Stage ->
* kleiner Abstand -> sichtbarer Viewport unten.
*/
.biconic-history__sticky-shell {
top:
var(--history-sticky-top) !important;
width: 100% !important;
height:
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- var(--history-bottom-gap)
) !important;
min-height: 0 !important;
max-height:
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- var(--history-bottom-gap)
) !important;
display: flex !important;
align-items: stretch !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/*
* Stage füllt diesen verfügbaren Bereich exakt aus.
*/
.biconic-history__stage {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
padding: 0 !important;
align-self: stretch !important;
align-items: stretch !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Linke Karte, Timeline und rechte Karte dürfen nie höher als die Stage werden. */
.biconic-history__year-panel,
.biconic-history__rail,
.biconic-history__card {
min-height: 0 !important;
max-height: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
}
/* Rechte Karte intern: Text oben, Animation nimmt nur den REST ein. */
.biconic-history__card {
grid-template-rows:
auto
auto
minmax(0, 1fr) !important;
overflow: hidden !important;
}
.biconic-history__card-body {
min-height: 0 !important;
}
.biconic-history__card-visual {
min-height: 0 !important;
max-height: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
/* =========================================================
DESKTOP
========================================================= */
@media (min-width: 981px) {
.biconic-history {
--history-bottom-gap: 12px;
}
.biconic-history__stage {
grid-template-columns:
minmax(250px, .72fr)
62px
minmax(0, 1.28fr) !important;
gap:
clamp(
28px,
4vw,
56px
) !important;
}
.biconic-history__year-panel,
.biconic-history__rail,
.biconic-history__card {
height: 100% !important;
}
}
/* =========================================================
TABLET
========================================================= */
@media (min-width: 761px) and (max-width: 980px) {
.biconic-history {
--history-bottom-gap: 10px;
}
.biconic-history__stage {
grid-template-columns:
minmax(190px, .58fr)
50px
minmax(0, 1.42fr) !important;
gap: 24px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.biconic-history {
--history-bottom-gap: 8px;
}
.biconic-history__story {
width: 100vw !important;
margin-left:
calc(
50% - 50vw
) !important;
padding:
0 8px !important;
box-sizing: border-box !important;
}
/*
* Mobile:
* links Timeline über volle Höhe,
* rechts oben kompakte Jahreszeile,
* rechts darunter große Karte.
*
* Alles bleibt innerhalb des sichtbaren roten Zielbereichs.
*/
.biconic-history__stage {
grid-template-columns:
32px
minmax(0, 1fr) !important;
grid-template-rows:
76px
minmax(0, 1fr) !important;
gap:
6px
8px !important;
overflow: hidden !important;
}
.biconic-history__rail {
grid-column: 1 !important;
grid-row: 1 / 3 !important;
width: 32px !important;
height: 100% !important;
min-height: 0 !important;
}
.biconic-history__year-panel {
grid-column: 2 !important;
grid-row: 1 !important;
height: 76px !important;
min-height: 0 !important;
padding:
6px
12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
overflow: hidden !important;
}
.biconic-history__stage-year {
max-width: 100% !important;
font-size:
clamp(
28px,
9vw,
42px
) !important;
line-height: .88 !important;
white-space: nowrap !important;
}
.biconic-history__stage-year[data-long-year="true"] {
font-size:
clamp(
17px,
5.2vw,
24px
) !important;
}
.biconic-history__stage-label {
margin-top: 4px !important;
}
.biconic-history__card {
grid-column: 2 !important;
grid-row: 2 !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
grid-template-rows:
auto
auto
minmax(0, 1fr) !important;
gap: 9px !important;
padding:
13px
12px
11px !important;
overflow: hidden !important;
}
.biconic-history__card-body h3 {
margin-bottom: 6px !important;
}
/*
* Entscheidend: KEINE mobile Mindesthöhe mehr,
* die die Karte über den Viewport hinausdrückt.
*/
.biconic-history__card-visual {
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
/* 1998: Infos und Flagge passen sich der tatsächlich verfügbaren Höhe an */
.history-scene--flag {
grid-template-rows:
auto
minmax(0, 1fr) !important;
height: 100% !important;
overflow: hidden !important;
}
.history-scene--flag .history-flag-wrap {
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
}
/* 1999 und 2024 ebenso vollständig im Visual-Feld halten */
.history-scene--date,
.history-scene--future,
.history-scene--network,
.history-scene--eastwest,
.history-scene--organization,
.history-scene--groups {
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
}
/* Kleine Smartphones */
@media (max-width: 390px) {
.biconic-history__story {
padding:
0 6px !important;
}
.biconic-history__stage {
grid-template-columns:
28px
minmax(0, 1fr) !important;
grid-template-rows:
66px
minmax(0, 1fr) !important;
column-gap: 6px !important;
}
.biconic-history__rail {
width: 28px !important;
}
.biconic-history__year-panel {
height: 66px !important;
}
}
/* =========================================================
SECTION 05 · v48
Sticky exakt 30 px unter Navigation + 30 px unten
========================================================= */
.biconic-history {
--history-bottom-gap: 30px !important;
}
/*
* Die reale Unterkante der BICONIC-Navigation wird per JS gemessen.
* Darauf werden exakt 30 px Abstand addiert.
*
* Die verfügbare Höhe endet 30 px oberhalb des unteren Viewport-Randes.
*/
.biconic-history__sticky-shell {
top:
var(--history-sticky-top) !important;
height:
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 30px
) !important;
min-height: 0 !important;
max-height:
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 30px
) !important;
}
/*
* Desktop, Tablet und Mobile verwenden bewusst denselben Abstand.
*/
@media (min-width: 981px) {
.biconic-history {
--history-bottom-gap: 30px !important;
}
}
@media (min-width: 761px) and (max-width: 980px) {
.biconic-history {
--history-bottom-gap: 30px !important;
}
}
@media (max-width: 760px) {
.biconic-history {
--history-bottom-gap: 30px !important;
}
.biconic-history__sticky-shell {
height:
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 30px
) !important;
max-height:
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 30px
) !important;
}
}
@media (max-width: 390px) {
.biconic-history {
--history-bottom-gap: 30px !important;
}
}
/* =========================================================
SECTION 05 · v49
Navigation komplett einkalkuliert + History kompakter
========================================================= */
.biconic-history {
--history-stage-max-height: 690px;
}
/*
* Die Sticky-Shell beschreibt weiterhin den gesamten verfügbaren
* Raum unterhalb der Navigation:
* Navigation-Unterkante + 30 px bis unten - 30 px.
*/
.biconic-history__sticky-shell {
top:
var(--history-sticky-top) !important;
height:
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 30px
) !important;
min-height: 0 !important;
max-height:
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 30px
) !important;
display: flex !important;
align-items: flex-start !important;
overflow: visible !important;
}
/*
* Der eigentliche History-Bereich wird bewusst kleiner als der
* komplette Rest-Viewport. So ist die Navigation sichtbar mit
* einkalkuliert und die gesamte Sektion wirkt kompakter.
*/
.biconic-history__stage {
width: 100% !important;
height:
min(
var(--history-stage-max-height),
100%
) !important;
max-height:
min(
var(--history-stage-max-height),
100%
) !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
align-self: flex-start !important;
align-items: stretch !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.biconic-history__year-panel,
.biconic-history__rail,
.biconic-history__card {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
}
/*
* Text oben; Animation darunter etwas niedriger.
*/
.biconic-history__card {
grid-template-rows:
auto
auto
minmax(110px, 1fr) !important;
overflow: hidden !important;
}
.biconic-history__card-visual {
height: 100% !important;
min-height: 110px !important;
max-height: 270px !important;
align-self: end !important;
overflow: hidden !important;
}
/* =========================================================
DESKTOP
========================================================= */
@media (min-width: 981px) {
.biconic-history {
--history-stage-max-height:
min(
690px,
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 30px
)
);
}
.biconic-history__card-visual {
max-height: 250px !important;
}
}
/* =========================================================
TABLET
========================================================= */
@media (min-width: 761px) and (max-width: 980px) {
.biconic-history {
--history-stage-max-height:
min(
620px,
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 30px
)
);
}
.biconic-history__card-visual {
max-height: 220px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.biconic-history {
--history-stage-max-height:
min(
590px,
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 30px
)
);
}
.biconic-history__sticky-shell {
align-items: flex-start !important;
}
.biconic-history__stage {
height:
min(
var(--history-stage-max-height),
100%
) !important;
max-height:
min(
var(--history-stage-max-height),
100%
) !important;
grid-template-rows:
62px
minmax(0, 1fr) !important;
}
.biconic-history__year-panel {
height: 62px !important;
}
.biconic-history__card {
grid-template-rows:
auto
auto
minmax(100px, 1fr) !important;
gap: 8px !important;
}
.biconic-history__card-visual {
min-height: 100px !important;
max-height: 210px !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.biconic-history {
--history-stage-max-height:
min(
540px,
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 30px
)
);
}
.biconic-history__stage {
grid-template-rows:
56px
minmax(0, 1fr) !important;
}
.biconic-history__year-panel {
height: 56px !important;
}
.biconic-history__card-visual {
min-height: 92px !important;
max-height: 190px !important;
}
}
/* =========================================================
SECTION 05 · CLEAN STICKY CONTROL
WICHTIG:
--history-sticky-top wird ausschließlich per JavaScript gesetzt.
Keine CSS-Regel darf diesen Wert mehr überschreiben.
========================================================= */
.biconic-history__sticky-shell {
top: var(--history-sticky-top) !important;
}
@media (min-width: 981px) {
.biconic-history {
--history-stage-max-height: 820px !important;
}
.biconic-history__card {
grid-template-rows:
auto
auto
320px !important;
}
.biconic-history__card-visual {
height: 320px !important;
min-height: 320px !important;
max-height: 320px !important;
}
}
/* =========================================================
BICONIC HISTORY · MOBILE FIX
Stabiler Kartenaufbau ohne Springen / Überlappen
Diesen Block GANZ UNTEN in biconic-header.css einfügen.
Alte experimentelle Mobile-Blöcke für
.biconic-history__card,
.biconic-history__card-body,
.biconic-history__card-visual und
.history-scene--flag vorher entfernen/auskommentieren.
========================================================= */
@media (max-width: 760px) {
/* -------------------------------------------------------
1. Rechte History-Karte: stabiler normaler Dokumentfluss
------------------------------------------------------- */
.biconic-history__card {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 14px 14px 16px !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* Kopf mit Jahr + Counter bleibt sauber oben */
.biconic-history__card-head {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
width: 100% !important;
margin: 0 0 10px !important;
min-height: 0 !important;
}
.biconic-history__card-year {
margin: 0 !important;
line-height: 1 !important;
}
.biconic-history__card-counter {
margin: 2px 0 0 !important;
}
/* -------------------------------------------------------
2. Überschrift + Beschreibung:
KEINE feste Höhe mehr -> dadurch kein Überlappen
------------------------------------------------------- */
.biconic-history__card-body {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.biconic-history__card-body h3 {
margin:
0
0
10px !important;
line-height: 1.05 !important;
}
.biconic-history__card-body p {
margin:
0 !important;
line-height: 1.42 !important;
}
/* -------------------------------------------------------
3. Graues Animationsfeld:
stabil, größer, aber NICHT in den Text hinein
------------------------------------------------------- */
.biconic-history__card-visual {
position: relative !important;
display: block !important;
width: 100% !important;
height: 330px !important;
min-height: 330px !important;
max-height: 330px !important;
margin:
28px
0
0 !important;
flex: none !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Alle Szenen bleiben exakt im grauen Feld */
.history-scene {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
/* -------------------------------------------------------
4. 1998 Flagge:
Info oben, Flagge kompakt darunter
------------------------------------------------------- */
.history-scene--flag {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows:
auto
1fr !important;
gap: 14px !important;
height: 100% !important;
padding: 12px !important;
align-items: stretch !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.history-flag-info {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 6px !important;
width: 100% !important;
margin: 0 !important;
}
.history-flag-info-card {
min-height: 0 !important;
padding: 7px 9px !important;
}
.history-scene--flag .history-flag-wrap {
width: 100% !important;
height: 170px !important;
min-height: 170px !important;
max-height: 170px !important;
align-self: end !important;
margin: 0 auto !important;
aspect-ratio: auto !important;
flex: none !important;
}
/* -------------------------------------------------------
5. Mobile Stage nicht auf eine starre Kartenhöhe zwingen
------------------------------------------------------- */
.biconic-history__stage {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/*
* Nur die Sticky-Hülle begrenzt den sichtbaren Bereich.
* Karte selbst darf ihren Inhalt sauber aufbauen.
*/
.biconic-history__sticky-shell {
overflow: visible !important;
}
}
/* =========================================================
Sehr kleine Smartphones
========================================================= */
@media (max-width: 390px) {
.biconic-history__card {
padding: 12px 12px 14px !important;
}
.biconic-history__card-visual {
height: 310px !important;
min-height: 310px !important;
max-height: 310px !important;
margin-top: 24px !important;
}
.history-scene--flag {
padding: 10px !important;
gap: 10px !important;
}
.history-scene--flag .history-flag-wrap {
height: 150px !important;
min-height: 150px !important;
max-height: 150px !important;
}
}
/* =========================================================
HEADER NETWORK · v50 · INTERAKTIVE PERSPEKTIVEN
========================================================= */
.biconic-mesh__people {
position: absolute;
inset: 0;
z-index: 9;
pointer-events: none;
}
.biconic-mesh__people .mesh-person {
pointer-events: auto;
}
.biconic-mesh__tooltip-text {
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.42;
}
@media (max-width: 760px) {
.biconic-mesh__tooltip {
bottom: 68px !important;
max-height: min(240px, 32vh);
overflow: auto;
}
.mesh-person:hover,
.mesh-person:focus-visible,
.mesh-person.is-hovered,
.mesh-person.is-locked {
transform:
translate(-1px, -1px)
scale(1.16);
}
}
/* =========================================================
HEADER NETWORK · v51 · 21 INDIVIDUELLE PERSPEKTIVEN
========================================================= */
.biconic-mesh__tooltip.has-no-body .biconic-mesh__tooltip-text {
display: none !important;
}
.biconic-mesh__tooltip.has-no-body .biconic-mesh__tooltip-title {
display: block;
max-width: 720px;
font-size:
clamp(
19px,
1.65vw,
28px
);
line-height: 1.28;
font-weight: 500;
letter-spacing: -.01em;
}
.biconic-mesh__tooltip-kicker {
margin-bottom: 12px;
}
.mesh-person {
--person-size:
clamp(
34px,
3.8vw,
56px
);
}
.mesh-person.is-hovered,
.mesh-person.is-locked,
.mesh-person:hover,
.mesh-person:focus-visible {
transform:
translate(-3px, -3px)
scale(1.24);
box-shadow:
0 0 0 12px rgba(155,79,150,.065),
0 0 38px rgba(211,83,255,.52),
0 0 70px rgba(48,117,255,.22);
}
@media (max-width: 760px) {
.mesh-person {
--person-size: 34px !important;
}
.biconic-mesh__tooltip.has-no-body .biconic-mesh__tooltip-title {
font-size:
clamp(
17px,
5vw,
22px
);
}
}
/* =========================================================
HEADER NETWORK · v52 · 15 PERSPEKTIVEN
========================================================= */
.mesh-person--16,
.mesh-person--17,
.mesh-person--18,
.mesh-person--19,
.mesh-person--20,
.mesh-person--21 {
display: none !important;
}
/* Perspektiven-Tooltip bewusst kleiner und ruhiger */
.biconic-mesh__tooltip.has-no-body .biconic-mesh__tooltip-title {
font-size:
clamp(
16px,
1.25vw,
22px
) !important;
line-height: 1.34 !important;
font-weight: 500 !important;
}
/* Flaggen-Beschreibung immer weiß – Lightmode wie Darkmode */
.biconic-mesh__tooltip:not(.has-no-body) .biconic-mesh__tooltip-title,
.biconic-mesh__tooltip:not(.has-no-body) .biconic-mesh__tooltip-text {
color: #ffffff !important;
opacity: 1 !important;
}
/* Tooltip selbst bleibt dunkel, damit Weiß in beiden Modi lesbar ist */
.biconic-mesh__tooltip {
color: #ffffff !important;
}
@media (max-width: 760px) {
.mesh-person {
--person-size: 31px !important;
}
.biconic-mesh__tooltip.has-no-body .biconic-mesh__tooltip-title {
font-size:
clamp(
15px,
4.2vw,
19px
) !important;
line-height: 1.38 !important;
}
.biconic-mesh__tooltip-kicker {
font-size: 11px !important;
margin-bottom: 8px !important;
}
}
@media (max-width: 760px) {
.mesh-person:hover,
.mesh-person:focus-visible,
.mesh-person.is-hovered,
.mesh-person.is-locked {
transform:
translate(-1px, -1px)
scale(1.12) !important;
}
}
/* =========================================================
HEADER · v53
Fokuszone, IWWIT-Chip, ruhigere Typografie,
kleinere Tooltips, Icons weiter vom Text entfernt
========================================================= */
/* ---------------------------------------------------------
ZENTRALE TEXT-/FOKUSZONE
--------------------------------------------------------- */
.biconic-mesh__story {
z-index: 14 !important;
}
.biconic-mesh__iwwit-chip {
position: absolute;
left: 50%;
top: 8%;
transform: translateX(-50%);
z-index: 18;
display: inline-flex;
align-items: center;
justify-content: center;
width: max-content;
max-width: min(520px, calc(100% - 56px));
min-height: 38px;
padding: 8px 22px;
border:
1px solid
rgba(255,255,255,.46);
border-radius: 999px;
background:
rgba(255,255,255,.055);
color:
rgba(255,255,255,.72);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.025),
0 0 28px rgba(172,87,223,.065);
backdrop-filter:
blur(7px);
-webkit-backdrop-filter:
blur(7px);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
"Barlow Semi Condensed",
Arial,
sans-serif
);
font-size:
clamp(
13px,
.95vw,
16px
);
font-weight: 500;
line-height: 1;
letter-spacing: .01em;
text-decoration: none;
opacity: .68;
pointer-events: auto;
transition:
opacity .2s ease,
border-color .2s ease,
background-color .2s ease,
transform .2s ease;
}
.biconic-mesh__iwwit-chip:hover,
.biconic-mesh__iwwit-chip:focus-visible {
opacity: .92;
border-color:
rgba(255,255,255,.70);
background:
rgba(255,255,255,.085);
transform:
translateX(-50%)
translateY(-1px);
}
.biconic-mesh__iwwit-chip:focus-visible {
outline:
2px solid
rgba(255,255,255,.74);
outline-offset: 4px;
}
/* Wertezeile direkt unter dem Chip – bewusst zurückgenommen */
.biconic-mesh__values {
top: 17.5% !important;
width:
min(
760px,
calc(100% - 80px)
) !important;
font-size:
clamp(
13px,
1.05vw,
18px
) !important;
font-weight: 400 !important;
line-height: 1.2 !important;
letter-spacing:
.145em !important;
color:
rgba(255,255,255,.58) !important;
opacity: .86;
}
.biconic-mesh__values span {
color:
rgba(196,102,224,.66) !important;
margin:
0
.42em !important;
}
/* Claim etwas kleiner und ruhiger */
.biconic-mesh__claim {
top: 62.5% !important;
width:
min(
760px,
calc(100% - 90px)
) !important;
font-size:
clamp(
20px,
2.15vw,
36px
) !important;
line-height: 1.12 !important;
font-weight: 300 !important;
letter-spacing:
.145em !important;
color:
rgba(255,255,255,.82) !important;
}
/* ---------------------------------------------------------
ICONS: ZENTRALE TEXTZONE FREIHALTEN
Desktop safe-zone ca. x 22–78 %, y 4–70 %
--------------------------------------------------------- */
.mesh-person--1 { left: 4% !important; top: 13% !important; }
.mesh-person--2 { left: 15% !important; top: 8% !important; }
.mesh-person--3 { left: 85% !important; top: 8% !important; }
.mesh-person--4 { left: 95% !important; top: 14% !important; }
.mesh-person--5 { left: 4% !important; top: 35% !important; }
.mesh-person--6 { left: 96% !important; top: 36% !important; }
.mesh-person--7 { left: 5% !important; top: 58% !important; }
.mesh-person--8 { left: 95% !important; top: 58% !important; }
.mesh-person--9 { left: 7% !important; top: 78% !important; }
.mesh-person--10 { left: 18% !important; top: 86% !important; }
.mesh-person--11 { left: 32% !important; top: 78% !important; }
.mesh-person--12 { left: 68% !important; top: 79% !important; }
.mesh-person--13 { left: 82% !important; top: 86% !important; }
.mesh-person--14 { left: 93% !important; top: 78% !important; }
.mesh-person--15 { left: 50% !important; top: 91% !important; }
/* Flaggen ebenfalls aus direkter Textnähe heraushalten */
.mesh-flag--trans { left: 6% !important; top: 10% !important; }
.mesh-flag--lesbian { left: 88% !important; top: 11% !important; }
.mesh-flag--gay { left: 90% !important; top: 55% !important; }
.mesh-flag--pan { left: 72% !important; top: 80% !important; }
.mesh-flag--ace { left: 12% !important; top: 80% !important; }
.mesh-flag--queer { left: 7% !important; top: 54% !important; }
/* ---------------------------------------------------------
TOOLTIP / MESSAGEBOX – deutlich kleinere Typografie
--------------------------------------------------------- */
.biconic-mesh__tooltip {
max-width:
min(
560px,
calc(100vw - 32px)
) !important;
padding:
20px
58px
20px
22px !important;
}
.biconic-mesh__tooltip-kicker {
margin-bottom:
8px !important;
font-size:
11px !important;
line-height:
1.15 !important;
letter-spacing:
.14em !important;
}
.biconic-mesh__tooltip-title {
margin-bottom:
6px !important;
font-size:
clamp(
16px,
1.15vw,
20px
) !important;
line-height:
1.26 !important;
}
.biconic-mesh__tooltip-text {
margin: 0 !important;
font-size:
clamp(
13px,
.95vw,
15px
) !important;
line-height:
1.42 !important;
color:
rgba(255,255,255,.94) !important;
opacity: 1 !important;
}
/* Perspektiven: die Message ist der Titel – ebenfalls kompakt */
.biconic-mesh__tooltip.has-no-body .biconic-mesh__tooltip-title {
max-width: 500px !important;
font-size:
clamp(
15px,
1.05vw,
18px
) !important;
line-height:
1.36 !important;
font-weight:
450 !important;
}
/* Flaggenbeschreibung immer weiß, unabhängig vom Site-Farbmodus */
body:not(.pcdark-mode)
.biconic-mesh__tooltip:not(.has-no-body)
.biconic-mesh__tooltip-title,
body:not(.pcdark-mode)
.biconic-mesh__tooltip:not(.has-no-body)
.biconic-mesh__tooltip-text,
body.pcdark-mode
.biconic-mesh__tooltip:not(.has-no-body)
.biconic-mesh__tooltip-title,
body.pcdark-mode
.biconic-mesh__tooltip:not(.has-no-body)
.biconic-mesh__tooltip-text,
html.pcdark-mode
.biconic-mesh__tooltip:not(.has-no-body)
.biconic-mesh__tooltip-title,
html.pcdark-mode
.biconic-mesh__tooltip:not(.has-no-body)
.biconic-mesh__tooltip-text {
color:
#ffffff !important;
opacity:
1 !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
/* Chip oben, aber bewusst dezent */
.biconic-mesh__iwwit-chip {
top: 16.5%;
max-width:
calc(100% - 80px);
min-height: 32px;
padding:
7px
15px;
font-size:
clamp(
11px,
3.2vw,
13px
);
opacity: .64;
}
.biconic-mesh__values {
top:
25.5% !important;
width:
calc(100% - 72px) !important;
font-size:
clamp(
9px,
2.6vw,
12px
) !important;
line-height:
1.35 !important;
letter-spacing:
.085em !important;
color:
rgba(255,255,255,.56) !important;
}
.biconic-mesh__values span {
margin:
0
.14em !important;
}
.biconic-mesh__claim {
top:
61.5% !important;
width:
calc(100% - 82px) !important;
font-size:
clamp(
16px,
4.9vw,
21px
) !important;
line-height:
1.18 !important;
letter-spacing:
.075em !important;
}
/*
* Mobile:
* Kein Profil-/Flaggenknoten in der zentralen Textzone.
* Die Knoten bilden eher einen Rahmen.
*/
.mesh-person {
--person-size:
29px !important;
}
.mesh-person--1 { left: 6% !important; top: 7% !important; }
.mesh-person--2 { left: 30% !important; top: 7% !important; }
.mesh-person--3 { left: 70% !important; top: 7% !important; }
.mesh-person--4 { left: 90% !important; top: 8% !important; }
.mesh-person--5 { left: 5% !important; top: 31% !important; }
.mesh-person--6 { left: 92% !important; top: 31% !important; }
.mesh-person--7 { left: 5% !important; top: 53% !important; }
.mesh-person--8 { left: 92% !important; top: 53% !important; }
.mesh-person--9 { left: 6% !important; top: 71% !important; }
.mesh-person--10 { left: 92% !important; top: 70% !important; }
.mesh-person--11 { left: 10% !important; top: 86% !important; }
.mesh-person--12 { left: 29% !important; top: 82% !important; }
.mesh-person--13 { left: 50% !important; top: 90% !important; }
.mesh-person--14 { left: 71% !important; top: 82% !important; }
.mesh-person--15 { left: 89% !important; top: 86% !important; }
.mesh-flag {
--size:
34px !important;
}
.mesh-flag--trans { left: 4% !important; top: 10% !important; }
.mesh-flag--lesbian { left: 86% !important; top: 11% !important; }
.mesh-flag--gay { left: 86% !important; top: 63% !important; }
.mesh-flag--pan { left: 69% !important; top: 79% !important; }
.mesh-flag--ace { left: 13% !important; top: 79% !important; }
.mesh-flag--queer { left: 3% !important; top: 63% !important; }
/* Mobile Messagebox kompakter */
.biconic-mesh__tooltip {
left:
14px !important;
right:
14px !important;
bottom:
72px !important;
width:
auto !important;
max-width:
none !important;
padding:
16px
48px
16px
17px !important;
border-radius:
16px !important;
}
.biconic-mesh__tooltip-kicker {
margin-bottom:
6px !important;
font-size:
9px !important;
letter-spacing:
.12em !important;
}
.biconic-mesh__tooltip-title,
.biconic-mesh__tooltip.has-no-body .biconic-mesh__tooltip-title {
font-size:
clamp(
13px,
3.65vw,
16px
) !important;
line-height:
1.36 !important;
font-weight:
450 !important;
}
.biconic-mesh__tooltip-text {
font-size:
clamp(
12px,
3.25vw,
14px
) !important;
line-height:
1.4 !important;
}
.biconic-mesh__tooltip-close {
right:
9px !important;
top:
9px !important;
width:
30px !important;
height:
30px !important;
font-size:
18px !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.biconic-mesh__iwwit-chip {
top: 16%;
max-width: calc(100% - 62px);
padding-inline: 12px;
}
.biconic-mesh__values {
top: 25% !important;
}
.biconic-mesh__claim {
width:
calc(100% - 60px) !important;
font-size:
clamp(
15px,
4.6vw,
19px
) !important;
}
}
/* =========================================================
HEADER · v54
Engere Typografie rund um BICONIC
+ kleinere IWWIT-Pille
+ Icons wieder über die gesamte Fläche verteilt
+ Messagebox leichter/schmaler
========================================================= */
/* ---------------------------------------------------------
IWWIT-PILLE: deutlich flacher
--------------------------------------------------------- */
.biconic-mesh__iwwit-chip {
min-height: 26px !important;
padding:
4px
13px !important;
border-width: 1px !important;
font-size:
clamp(
11px,
.78vw,
13px
) !important;
font-weight: 400 !important;
line-height: 1 !important;
opacity: .56 !important;
}
/* ---------------------------------------------------------
Desktop:
- Wertezeile ca. 20 px über BICONIC
- IWWIT-Pille ca. 20 px über Wertezeile
- Claim ca. 20 px unter BICONIC
--------------------------------------------------------- */
@media (min-width: 761px) {
/*
* BICONIC liegt im Canvas ungefähr bei 45% Höhe.
* Die folgenden Werte sind bewusst eng an diese Zone gesetzt.
*/
.biconic-mesh__values {
top:
calc(
45% - 128px
) !important;
transform:
translateX(-50%) !important;
font-size:
clamp(
12px,
.92vw,
16px
) !important;
line-height: 1 !important;
letter-spacing:
.12em !important;
}
.biconic-mesh__iwwit-chip {
top:
calc(
45% - 174px
) !important;
}
.biconic-mesh__claim {
top:
calc(
45% + 118px
) !important;
transform:
translateX(-50%) !important;
font-size:
clamp(
18px,
1.75vw,
29px
) !important;
line-height: 1 !important;
letter-spacing:
.12em !important;
}
}
/* ---------------------------------------------------------
Mobile:
enger zusammen – gleiche Logik
--------------------------------------------------------- */
@media (max-width: 760px) {
.biconic-mesh__iwwit-chip {
min-height: 24px !important;
padding:
3px
11px !important;
font-size:
clamp(
10px,
2.8vw,
12px
) !important;
top:
calc(
44.5% - 118px
) !important;
opacity: .54 !important;
}
.biconic-mesh__values {
top:
calc(
44.5% - 76px
) !important;
transform:
translateX(-50%) !important;
width:
calc(
100% - 56px
) !important;
font-size:
clamp(
8.5px,
2.35vw,
10.5px
) !important;
line-height: 1 !important;
letter-spacing:
.07em !important;
white-space: nowrap !important;
}
.biconic-mesh__claim {
top:
calc(
44.5% + 68px
) !important;
transform:
translateX(-50%) !important;
width:
calc(
100% - 60px
) !important;
font-size:
clamp(
14px,
4.15vw,
18px
) !important;
line-height: 1 !important;
letter-spacing:
.055em !important;
white-space: nowrap !important;
}
}
/* ---------------------------------------------------------
Icons: wieder über die GESAMTE Fläche verteilt.
Zentrale Lesefläche bleibt dennoch etwas ruhiger.
--------------------------------------------------------- */
.mesh-person--1 { left: 3% !important; top: 9% !important; }
.mesh-person--2 { left: 17% !important; top: 15% !important; }
.mesh-person--3 { left: 33% !important; top: 8% !important; }
.mesh-person--4 { left: 52% !important; top: 12% !important; }
.mesh-person--5 { left: 69% !important; top: 7% !important; }
.mesh-person--6 { left: 85% !important; top: 14% !important; }
.mesh-person--7 { left: 96% !important; top: 28% !important; }
.mesh-person--8 { left: 5% !important; top: 39% !important; }
.mesh-person--9 { left: 91% !important; top: 42% !important; }
.mesh-person--10 { left: 6% !important; top: 63% !important; }
.mesh-person--11 { left: 95% !important; top: 64% !important; }
.mesh-person--12 { left: 13% !important; top: 82% !important; }
.mesh-person--13 { left: 37% !important; top: 88% !important; }
.mesh-person--14 { left: 66% !important; top: 84% !important; }
.mesh-person--15 { left: 87% !important; top: 80% !important; }
/* Flaggen ebenfalls gleichmäßiger über die Fläche */
.mesh-flag--trans { left: 8% !important; top: 12% !important; }
.mesh-flag--lesbian { left: 88% !important; top: 13% !important; }
.mesh-flag--gay { left: 89% !important; top: 53% !important; }
.mesh-flag--pan { left: 73% !important; top: 79% !important; }
.mesh-flag--ace { left: 14% !important; top: 79% !important; }
.mesh-flag--queer { left: 7% !important; top: 53% !important; }
/* ---------------------------------------------------------
Messagebox: Schrift schmaler / dünner
--------------------------------------------------------- */
.biconic-mesh__tooltip-kicker {
font-weight: 400 !important;
letter-spacing:
.11em !important;
}
.biconic-mesh__tooltip-title,
.biconic-mesh__tooltip.has-no-body .biconic-mesh__tooltip-title {
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
"Barlow Semi Condensed",
Arial,
sans-serif
) !important;
font-stretch: condensed;
font-weight: 300 !important;
letter-spacing:
0 !important;
font-size:
clamp(
14px,
.92vw,
17px
) !important;
line-height:
1.34 !important;
}
.biconic-mesh__tooltip-text {
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
"Barlow Semi Condensed",
Arial,
sans-serif
) !important;
font-weight: 300 !important;
font-size:
clamp(
12px,
.82vw,
14px
) !important;
line-height:
1.38 !important;
}
/* ---------------------------------------------------------
Mobile Icon-Verteilung:
gesamte Fläche nutzen, aber nicht direkt über BICONIC
--------------------------------------------------------- */
@media (max-width: 760px) {
.mesh-person {
--person-size:
28px !important;
}
.mesh-person--1 { left: 4% !important; top: 7% !important; }
.mesh-person--2 { left: 25% !important; top: 12% !important; }
.mesh-person--3 { left: 48% !important; top: 6% !important; }
.mesh-person--4 { left: 72% !important; top: 11% !important; }
.mesh-person--5 { left: 91% !important; top: 7% !important; }
.mesh-person--6 { left: 5% !important; top: 31% !important; }
.mesh-person--7 { left: 92% !important; top: 32% !important; }
.mesh-person--8 { left: 4% !important; top: 55% !important; }
.mesh-person--9 { left: 93% !important; top: 54% !important; }
.mesh-person--10 { left: 8% !important; top: 72% !important; }
.mesh-person--11 { left: 88% !important; top: 72% !important; }
.mesh-person--12 { left: 13% !important; top: 87% !important; }
.mesh-person--13 { left: 38% !important; top: 82% !important; }
.mesh-person--14 { left: 63% !important; top: 87% !important; }
.mesh-person--15 { left: 86% !important; top: 83% !important; }
.mesh-flag {
--size:
33px !important;
}
.mesh-flag--trans { left: 7% !important; top: 11% !important; }
.mesh-flag--lesbian { left: 86% !important; top: 12% !important; }
.mesh-flag--gay { left: 86% !important; top: 63% !important; }
.mesh-flag--pan { left: 70% !important; top: 79% !important; }
.mesh-flag--ace { left: 14% !important; top: 79% !important; }
.mesh-flag--queer { left: 4% !important; top: 63% !important; }
.biconic-mesh__tooltip-title,
.biconic-mesh__tooltip.has-no-body .biconic-mesh__tooltip-title {
font-weight:
300 !important;
font-size:
clamp(
12.5px,
3.35vw,
15px
) !important;
line-height:
1.36 !important;
}
.biconic-mesh__tooltip-text {
font-weight:
300 !important;
font-size:
clamp(
11.5px,
3vw,
13px
) !important;
}
}
/* =========================================================
HEADER · v55
Texte deutlich näher an BICONIC
+ Mobile Icons stärker verteilt
========================================================= */
/* ---------------------------------------------------------
DESKTOP / TABLET
Wertezeile ca. 10 px über BICONIC,
IWWIT-Pille direkt darüber,
Claim ca. 10 px darunter.
--------------------------------------------------------- */
@media (min-width: 761px) {
.biconic-mesh__values {
top:
calc(
45% - 108px
) !important;
font-size:
clamp(
12px,
.92vw,
16px
) !important;
line-height: 1 !important;
}
.biconic-mesh__iwwit-chip {
top:
calc(
45% - 142px
) !important;
min-height:
24px !important;
padding:
3px
12px !important;
}
.biconic-mesh__claim {
top:
calc(
45% + 104px
) !important;
font-size:
clamp(
18px,
1.7vw,
28px
) !important;
line-height: 1 !important;
}
}
/* ---------------------------------------------------------
MOBILE
Noch enger an BICONIC
--------------------------------------------------------- */
@media (max-width: 760px) {
.biconic-mesh__values {
top:
calc(
44.5% - 59px
) !important;
font-size:
clamp(
8.5px,
2.35vw,
10.5px
) !important;
}
.biconic-mesh__iwwit-chip {
top:
calc(
44.5% - 91px
) !important;
min-height:
22px !important;
padding:
3px
10px !important;
font-size:
clamp(
9.5px,
2.65vw,
11.5px
) !important;
}
.biconic-mesh__claim {
top:
calc(
44.5% + 56px
) !important;
font-size:
clamp(
13.5px,
4vw,
17.5px
) !important;
}
/* -------------------------------------------------------
15 Perspektiv-Icons stärker über die gesamte Fläche
verteilt. Mitte bleibt für BICONIC lesbar.
------------------------------------------------------- */
.mesh-person {
--person-size:
27px !important;
}
.mesh-person--1 { left: 4% !important; top: 6% !important; }
.mesh-person--2 { left: 22% !important; top: 12% !important; }
.mesh-person--3 { left: 43% !important; top: 5% !important; }
.mesh-person--4 { left: 68% !important; top: 11% !important; }
.mesh-person--5 { left: 91% !important; top: 6% !important; }
.mesh-person--6 { left: 3% !important; top: 28% !important; }
.mesh-person--7 { left: 94% !important; top: 29% !important; }
.mesh-person--8 { left: 2% !important; top: 50% !important; }
.mesh-person--9 { left: 95% !important; top: 50% !important; }
.mesh-person--10 { left: 4% !important; top: 69% !important; }
.mesh-person--11 { left: 93% !important; top: 69% !important; }
.mesh-person--12 { left: 10% !important; top: 87% !important; }
.mesh-person--13 { left: 34% !important; top: 82% !important; }
.mesh-person--14 { left: 64% !important; top: 86% !important; }
.mesh-person--15 { left: 89% !important; top: 83% !important; }
/* Flaggen auf Mobile ebenfalls stärker verteilen */
.mesh-flag--trans { left: 6% !important; top: 10% !important; }
.mesh-flag--lesbian { left: 86% !important; top: 11% !important; }
.mesh-flag--gay { left: 88% !important; top: 61% !important; }
.mesh-flag--pan { left: 70% !important; top: 80% !important; }
.mesh-flag--ace { left: 12% !important; top: 80% !important; }
.mesh-flag--queer { left: 5% !important; top: 61% !important; }
}
/* ---------------------------------------------------------
Sehr kleine Smartphones
--------------------------------------------------------- */
@media (max-width: 390px) {
.biconic-mesh__values {
top:
calc(
44.5% - 56px
) !important;
}
.biconic-mesh__iwwit-chip {
top:
calc(
44.5% - 86px
) !important;
}
.biconic-mesh__claim {
top:
calc(
44.5% + 53px
) !important;
}
}
/* =========================================================
HEADER · v56
IWWIT-Pille bleibt unverändert.
Nur Wertezeile + Claim näher an BICONIC.
========================================================= */
/* Desktop / Tablet */
@media (min-width: 761px) {
/*
* IWWIT — Ich weiss was ich tu
* absichtlich NICHT überschrieben.
* Position/Höhe bleiben exakt wie in v55.
*/
.biconic-mesh__values {
top:
calc(
45% - 94px
) !important;
}
.biconic-mesh__claim {
top:
calc(
45% + 91px
) !important;
}
}
/* Mobile */
@media (max-width: 760px) {
/*
* IWWIT-Pille bleibt ebenfalls exakt auf der v55-Position.
*/
.biconic-mesh__values {
top:
calc(
44.5% - 49px
) !important;
}
.biconic-mesh__claim {
top:
calc(
44.5% + 47px
) !important;
}
}
/* Kleine Smartphones */
@media (max-width: 390px) {
.biconic-mesh__values {
top:
calc(
44.5% - 47px
) !important;
}
.biconic-mesh__claim {
top:
calc(
44.5% + 45px
) !important;
}
}
/* =========================================================
HEADER PERFORMANCE · v61
========================================================= */
.biconic-mesh__canvas {
contain: strict;
transform: translateZ(0);
}
/* =========================================================
HEADER · v62
Hintergrundbild + klare 55/20/25 BICONIC-Farbverteilung
========================================================= */
/*
* Das hochgeladene BICONIC-Motiv liegt als eigene Ebene
* hinter Canvas, Icons und Text.
*/
.biconic-mesh::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image:
url("https://wp-testvorschau.de/wp-content/uploads/2026/09/Illustration_Biconic-scaled.jpg");
background-repeat:
no-repeat;
background-position:
center center;
background-size:
cover;
opacity:
.22;
pointer-events:
none;
}
/*
* Canvas bleibt über dem Motiv.
*/
.biconic-mesh__canvas {
z-index:
2 !important;
}
/*
* Das Motiv auf kleinen Displays etwas zurücknehmen,
* damit BICONIC und Navigation klar bleiben.
*/
@media (max-width: 760px) {
.biconic-mesh::before {
background-position:
center center;
background-size:
cover;
opacity:
.18;
}
}
/*
* Auf sehr großen Displays minimal stärker,
* da mehr dunkle Freifläche vorhanden ist.
*/
@media (min-width: 1440px) {
.biconic-mesh::before {
opacity:
.24;
}
}
/* =========================================================
SECTION 06 · COMMUNITY(S) · v63
Übersichtliche, leicht animierte Raum-Kästen
========================================================= */
.biconic-community-cards {
--community-progress: 0;
position: relative;
z-index: 3;
width: 100%;
margin: 0;
overflow: clip;
color: var(--text-main);
background: var(--bg-color);
scroll-margin-top:
calc(
var(--biconic-nav-top, 0px)
+ 86px
);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
var(--font-family, "Barlow Semi Condensed", Arial, sans-serif)
);
}
.community-cards__inner {
width:
min(
1120px,
calc(100% - 40px)
);
margin:
0 auto;
padding:
clamp(68px, 7vw, 100px)
0
clamp(74px, 8vw, 112px);
}
/* ---------------------------------------------------------
Header
--------------------------------------------------------- */
.community-cards__header {
position: relative;
max-width: 920px;
margin-bottom:
clamp(42px, 5vw, 66px);
}
.community-cards__index {
margin:
0
0
12px;
color: var(--text-muted);
font-size:
clamp(12px, .9vw, 15px);
font-weight: 500;
line-height: 1;
letter-spacing: .16em;
}
.community-cards__title {
margin: 0;
color: var(--primary-color);
font-size:
clamp(
64px,
9vw,
132px
);
font-weight: 600;
line-height: .84;
letter-spacing: -.055em;
}
.community-cards__title span {
color:
color-mix(
in srgb,
var(--primary-color) 30%,
transparent
);
font-weight: 300;
}
.community-cards__subtitle {
max-width: 640px;
margin:
clamp(18px, 2vw, 26px)
0
0;
color: var(--text-muted);
font-size:
clamp(18px, 1.55vw, 25px);
font-weight: 300;
line-height: 1.35;
}
/* ---------------------------------------------------------
Flow / Rail
--------------------------------------------------------- */
.community-cards__flow {
position: relative;
display: grid;
gap:
clamp(26px, 3vw, 38px);
}
.community-cards__rail {
position: absolute;
left: 31px;
top: 40px;
bottom: 40px;
z-index: 0;
width: 2px;
border-radius: 999px;
background:
color-mix(
in srgb,
var(--border-color) 85%,
transparent
);
overflow: hidden;
}
.community-cards__rail-progress {
position: absolute;
left: 0;
top: 0;
width: 100%;
height:
calc(
var(--community-progress)
* 100%
);
border-radius: inherit;
background:
linear-gradient(
180deg,
#df0071 0%,
#a44fa5 55%,
#1546b8 100%
);
transition:
height .12s linear;
}
/* ---------------------------------------------------------
Card
--------------------------------------------------------- */
.community-card {
position: relative;
z-index: 1;
display: grid;
grid-template-columns:
64px
minmax(0, 1fr);
align-items: start;
opacity: .54;
transform:
translate3d(
0,
24px,
0
);
transition:
opacity .55s ease,
transform .7s cubic-bezier(.2,.75,.25,1);
}
.community-card.is-visible {
opacity: 1;
transform:
translate3d(
0,
0,
0
);
}
.community-card__marker {
position: relative;
z-index: 4;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-top: 28px;
border:
1px solid
color-mix(
in srgb,
var(--border-color) 80%,
transparent
);
border-radius: 50%;
background: var(--card-bg);
box-shadow:
0 0 0 8px
color-mix(
in srgb,
var(--bg-color) 92%,
transparent
);
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .08em;
transition:
border-color .45s ease,
color .45s ease,
transform .55s cubic-bezier(.2,.75,.25,1),
box-shadow .45s ease;
}
.community-card.is-visible
.community-card__marker {
color:
color-mix(
in srgb,
#a34fa9 76%,
var(--text-main)
);
border-color:
color-mix(
in srgb,
#a34fa9 46%,
var(--border-color)
);
transform:
scale(1.06);
box-shadow:
0 0 0 8px
color-mix(
in srgb,
var(--bg-color) 92%,
transparent
),
0 0 28px
rgba(153,76,173,.10);
}
.community-card__box {
position: relative;
min-height: 0;
padding:
clamp(28px, 3.8vw, 46px);
border:
1px solid
color-mix(
in srgb,
var(--border-color) 88%,
transparent
);
border-radius:
clamp(22px, 2.5vw, 30px);
background:
color-mix(
in srgb,
var(--card-bg) 96%,
transparent
);
box-shadow:
0 18px 54px
color-mix(
in srgb,
#000 5%,
transparent
);
overflow: hidden;
}
.community-card__head,
.community-card__text,
.community-card__keywords {
position: relative;
z-index: 4;
}
.community-card__eyebrow {
margin:
0
0
9px;
color:
color-mix(
in srgb,
#9d4eb0 76%,
var(--text-main)
);
font-size:
clamp(12px, .88vw, 14px);
font-weight: 600;
line-height: 1;
letter-spacing: .13em;
text-transform: uppercase;
}
.community-card__heading {
max-width: 760px;
margin:
0
0
clamp(18px, 2vw, 24px);
color: var(--primary-color);
font-size:
clamp(25px, 2.45vw, 38px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.025em;
}
.community-card__text {
max-width: 820px;
margin: 0;
color: var(--text-main);
font-size:
clamp(18px, 1.45vw, 22px);
font-weight: 300;
line-height: 1.52;
letter-spacing: -.005em;
}
.community-card__text em {
color:
color-mix(
in srgb,
#9c4db2 78%,
var(--text-main)
);
font-style: italic;
font-weight: 500;
}
/* ---------------------------------------------------------
Keywords
--------------------------------------------------------- */
.community-card__keywords {
display: flex;
flex-wrap: wrap;
gap:
8px;
margin-top:
clamp(20px, 2.4vw, 28px);
}
.community-card__keywords span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding:
6px
11px;
border:
1px solid
color-mix(
in srgb,
var(--border-color) 88%,
transparent
);
border-radius: 999px;
background:
color-mix(
in srgb,
var(--bg-color) 70%,
var(--card-bg)
);
color: var(--text-muted);
font-size:
clamp(12px, .9vw, 14px);
font-weight: 500;
line-height: 1.15;
opacity: .72;
transform:
translateY(8px);
transition:
opacity .45s ease,
transform .55s cubic-bezier(.2,.75,.25,1),
color .45s ease,
border-color .45s ease;
}
.community-card.is-visible
.community-card__keywords span {
opacity: 1;
transform:
translateY(0);
}
.community-card.is-visible
.community-card__keywords span:nth-child(2) {
transition-delay: .08s;
}
.community-card.is-visible
.community-card__keywords span:nth-child(3) {
transition-delay: .16s;
}
/* ---------------------------------------------------------
Abstract visuals – subtle only
--------------------------------------------------------- */
.community-card__visual {
position: absolute;
right:
clamp(18px, 3vw, 38px);
bottom:
clamp(18px, 3vw, 34px);
z-index: 1;
width:
clamp(120px, 17vw, 210px);
height:
clamp(92px, 12vw, 150px);
opacity: .26;
pointer-events: none;
transition:
opacity .55s ease,
transform .8s cubic-bezier(.2,.75,.25,1);
}
.community-card.is-visible
.community-card__visual {
opacity: .48;
}
/* Card 1 */
.community-card__visual--between {
display: grid;
place-items: center;
}
.community-orbit {
position: absolute;
display: grid;
place-items: center;
border-radius: 50%;
}
.community-orbit--left,
.community-orbit--right {
width: 76px;
height: 76px;
border:
1px solid
color-mix(
in srgb,
var(--primary-color) 13%,
transparent
);
}
.community-orbit--left {
left: 0;
background:
rgba(220,0,112,.07);
transform:
translateX(16px);
}
.community-orbit--right {
right: 0;
background:
rgba(21,70,184,.07);
transform:
translateX(-16px);
}
.community-orbit--center {
width: 62px;
height: 62px;
color:
color-mix(
in srgb,
#9d4fb0 76%,
var(--text-main)
);
background:
color-mix(
in srgb,
#9d4fb0 9%,
var(--card-bg)
);
border:
1px solid
color-mix(
in srgb,
#9d4fb0 24%,
transparent
);
font-size: 19px;
font-weight: 700;
transform:
scale(.84);
transition:
transform .7s cubic-bezier(.2,.75,.25,1);
}
.community-card--1.is-visible
.community-orbit--left {
transform:
translateX(-2px);
}
.community-card--1.is-visible
.community-orbit--right {
transform:
translateX(2px);
}
.community-card--1.is-visible
.community-orbit--center {
transform:
scale(1);
}
/* Card 2 */
.community-card__visual--together {
display: block;
}
.community-dot {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background:
linear-gradient(
135deg,
#dc0070,
#9e4faa,
#1546b8
);
transition:
transform .7s cubic-bezier(.2,.75,.25,1);
}
.community-dot--1 { left: 8%; top: 14%; }
.community-dot--2 { right: 9%; top: 17%; }
.community-dot--3 { left: 18%; bottom: 17%; }
.community-dot--4 { right: 17%; bottom: 14%; }
.community-dot--5 { left: 46%; top: 39%; }
.community-dot--6 { left: 55%; bottom: 26%; }
.community-card--2.is-visible
.community-dot--1 { transform: translate(42px, 28px); }
.community-card--2.is-visible
.community-dot--2 { transform: translate(-38px, 25px); }
.community-card--2.is-visible
.community-dot--3 { transform: translate(34px, -25px); }
.community-card--2.is-visible
.community-dot--4 { transform: translate(-35px, -26px); }
.community-card__connection {
position: absolute;
left: 27%;
top: 48%;
width: 48%;
height: 1px;
background:
linear-gradient(
90deg,
rgba(220,0,112,.42),
rgba(157,79,170,.46),
rgba(21,70,184,.42)
);
transform-origin: left center;
transform:
scaleX(0);
transition:
transform .75s cubic-bezier(.2,.75,.25,1);
}
.community-card__connection--2 {
top: 57%;
transform:
rotate(19deg)
scaleX(0);
}
.community-card__connection--3 {
top: 39%;
transform:
rotate(-18deg)
scaleX(0);
}
.community-card--2.is-visible
.community-card__connection--1 {
transform:
scaleX(1);
}
.community-card--2.is-visible
.community-card__connection--2 {
transform:
rotate(19deg)
scaleX(1);
}
.community-card--2.is-visible
.community-card__connection--3 {
transform:
rotate(-18deg)
scaleX(1);
}
/* Card 3 */
.community-card__keywords--final {
align-items: center;
}
.community-card__meant {
opacity: .52 !important;
}
.community-card__arrow {
padding-inline: 2px !important;
border: 0 !important;
background: transparent !important;
font-size: 18px !important;
}
.community-card__addressed {
color:
color-mix(
in srgb,
#9d4eb0 82%,
var(--text-main)
) !important;
border-color:
color-mix(
in srgb,
#9d4eb0 30%,
var(--border-color)
) !important;
}
.community-card__visual--open {
display: grid;
place-items: center;
}
.community-open {
position: absolute;
width: 74px;
height: 74px;
border:
1px solid
color-mix(
in srgb,
var(--primary-color) 13%,
transparent
);
border-radius: 50%;
transition:
transform .75s cubic-bezier(.2,.75,.25,1),
opacity .55s ease;
}
.community-open--a {
background:
rgba(220,0,112,.07);
}
.community-open--b {
background:
rgba(157,79,170,.07);
}
.community-open--c {
background:
rgba(21,70,184,.07);
}
.community-card--3.is-visible
.community-open--a {
transform:
translate(-42px, -7px);
}
.community-card--3.is-visible
.community-open--b {
transform:
translate(0, 12px)
scale(1.12);
}
.community-card--3.is-visible
.community-open--c {
transform:
translate(42px, -7px);
}
/* =========================================================
Dark mode
========================================================= */
body.pcdark-mode
.biconic-community-cards,
html.pcdark-mode body
.biconic-community-cards {
background: #000;
}
body.pcdark-mode
.community-card__box,
html.pcdark-mode body
.community-card__box {
background:
rgba(24,24,27,.96);
border-color:
rgba(255,255,255,.09);
box-shadow:
0 18px 54px
rgba(0,0,0,.28);
}
body.pcdark-mode
.community-card__marker,
html.pcdark-mode body
.community-card__marker {
background: #1c1c1e;
border-color:
rgba(255,255,255,.10);
}
body.pcdark-mode
.community-card__keywords span,
html.pcdark-mode body
.community-card__keywords span {
background:
rgba(255,255,255,.045);
border-color:
rgba(255,255,255,.09);
}
/* =========================================================
Mobile
========================================================= */
@media (max-width: 760px) {
.community-cards__inner {
width:
calc(
100% - 28px
);
padding:
58px
0
68px;
}
.community-cards__header {
margin-bottom:
34px;
}
.community-cards__title {
font-size:
clamp(
62px,
19vw,
90px
);
}
.community-cards__subtitle {
margin-top: 16px;
font-size:
clamp(
16px,
4.7vw,
20px
);
}
.community-cards__flow {
gap: 22px;
}
.community-cards__rail {
left: 20px;
top: 34px;
bottom: 34px;
}
.community-card {
grid-template-columns:
44px
minmax(0, 1fr);
transform:
translate3d(
0,
16px,
0
);
}
.community-card__marker {
width: 34px;
height: 34px;
margin-top: 20px;
box-shadow:
0 0 0 6px
color-mix(
in srgb,
var(--bg-color) 94%,
transparent
);
font-size: 10px;
}
.community-card__box {
padding:
22px
18px
20px;
border-radius: 20px;
}
.community-card__eyebrow {
margin-bottom: 7px;
font-size: 11px;
}
.community-card__heading {
margin-bottom: 16px;
font-size:
clamp(
22px,
6.5vw,
28px
);
line-height: 1.1;
}
.community-card__text {
padding-bottom:
100px;
font-size:
clamp(
16px,
4.35vw,
18px
);
line-height: 1.5;
}
.community-card__keywords {
margin-top: 18px;
gap: 6px;
}
.community-card__keywords span {
min-height: 27px;
padding:
5px
9px;
font-size: 11px;
}
.community-card__visual {
right: 14px;
bottom: 14px;
width: 118px;
height: 84px;
opacity: .30;
}
.community-card.is-visible
.community-card__visual {
opacity: .44;
}
.community-orbit--left,
.community-orbit--right {
width: 57px;
height: 57px;
}
.community-orbit--center {
width: 48px;
height: 48px;
font-size: 15px;
}
.community-open {
width: 54px;
height: 54px;
}
}
/* =========================================================
Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
.community-card,
.community-card__marker,
.community-card__keywords span,
.community-card__visual,
.community-orbit,
.community-dot,
.community-card__connection,
.community-open {
transition: none !important;
}
.community-card {
opacity: 1 !important;
transform: none !important;
}
.community-card__keywords span {
opacity: 1 !important;
transform: none !important;
}
.community-card__visual {
opacity: .38 !important;
}
}
/* =========================================================
HEADER · v64
Hintergrundbild an den seitlichen Kanten weich ausblenden
========================================================= */
/*
* Das eigentliche BICONIC-Hintergrundbild bleibt auf ::before.
* Darüber liegt auf ::after nur eine seitliche Abdunklung,
* damit die harten Bildkanten optisch in den dunklen Header
* übergehen.
*/
.biconic-mesh::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(0,0,0,.72) 0%,
rgba(0,0,0,.50) 4%,
rgba(0,0,0,.28) 9%,
rgba(0,0,0,.10) 14%,
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,.10) 86%,
rgba(0,0,0,.28) 91%,
rgba(0,0,0,.50) 96%,
rgba(0,0,0,.72) 100%
);
}
/*
* Canvas, Icons und Texte bleiben über Bild + Fade.
*/
.biconic-mesh__canvas {
position: relative;
z-index: 2 !important;
}
.biconic-mesh__people,
.biconic-mesh__flags,
.biconic-mesh__story,
.biconic-mesh__tooltip {
z-index: 3;
}
/*
* Mobile:
* Verlauf etwas breiter, damit das Bild auf schmalen
* Displays weicher in die Hintergrundfläche übergeht.
*/
@media (max-width: 760px) {
.biconic-mesh::after {
background:
linear-gradient(
90deg,
rgba(0,0,0,.62) 0%,
rgba(0,0,0,.42) 5%,
rgba(0,0,0,.22) 11%,
rgba(0,0,0,.08) 17%,
rgba(0,0,0,0) 24%,
rgba(0,0,0,0) 76%,
rgba(0,0,0,.08) 83%,
rgba(0,0,0,.22) 89%,
rgba(0,0,0,.42) 95%,
rgba(0,0,0,.62) 100%
);
}
}
/*
* Falls der Header in Zukunft heller wird, bleibt der
* Effekt bewusst an den dunklen BICONIC-Hero gekoppelt.
*/
/* =========================================================
SECTION 07 · SPRACHE IST MACHT · v66
Editoriales Sprachlabor – bewusst anders als Sektion 6
========================================================= */
.biconic-language-lab {
--language-progress: 0;
position: relative;
z-index: 3;
width: 100%;
margin: 0;
overflow: clip;
color: var(--text-main);
background: var(--bg-color);
scroll-margin-top:
calc(
var(--biconic-nav-top, 0px)
+ 86px
);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
var(--font-family, "Barlow Semi Condensed", Arial, sans-serif)
);
}
.language-lab__inner {
width:
min(
1160px,
calc(100% - 40px)
);
margin: 0 auto;
padding:
clamp(76px, 8vw, 118px)
0
clamp(84px, 9vw, 128px);
}
/* ---------------------------------------------------------
Header
--------------------------------------------------------- */
.language-lab__header {
max-width: 1040px;
margin-bottom:
clamp(54px, 7vw, 92px);
}
.language-lab__index {
margin:
0
0
12px;
color: var(--text-muted);
font-size:
clamp(12px, .9vw, 15px);
font-weight: 500;
line-height: 1;
letter-spacing: .16em;
}
.language-lab__title {
margin: 0;
color: var(--primary-color);
font-size:
clamp(
66px,
9.4vw,
144px
);
font-weight: 600;
line-height: .82;
letter-spacing: -.06em;
}
.language-lab__title span {
display: block;
margin-left:
clamp(40px, 8vw, 130px);
color:
color-mix(
in srgb,
#9d4fac 64%,
var(--primary-color)
);
font-weight: 300;
}
.language-lab__subtitle {
max-width: 660px;
margin:
clamp(22px, 2.5vw, 34px)
0
0;
color: var(--text-muted);
font-size:
clamp(18px, 1.55vw, 25px);
font-weight: 300;
line-height: 1.35;
}
/* ---------------------------------------------------------
Acts
--------------------------------------------------------- */
.language-lab__act {
position: relative;
margin:
0
0
clamp(72px, 8vw, 116px);
opacity: .5;
transform:
translateY(28px);
transition:
opacity .6s ease,
transform .8s cubic-bezier(.2,.75,.25,1);
}
.language-lab__act.is-visible {
opacity: 1;
transform: none;
}
.language-lab__act-grid {
display: grid;
grid-template-columns:
120px
minmax(0, 1fr);
gap:
clamp(28px, 4vw, 58px);
align-items: start;
}
/* Editorial margin */
.language-lab__margin {
position: sticky;
top:
calc(
var(--biconic-nav-top, 0px)
+ 94px
);
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 4px;
}
.language-lab__margin-number {
color:
color-mix(
in srgb,
#9d4fac 70%,
var(--text-main)
);
font-size:
clamp(24px, 2.5vw, 36px);
font-weight: 600;
line-height: 1;
}
.language-lab__margin-word {
writing-mode: vertical-rl;
transform: rotate(180deg);
color:
color-mix(
in srgb,
var(--text-main) 20%,
transparent
);
font-size:
clamp(34px, 4vw, 58px);
font-weight: 600;
line-height: .9;
letter-spacing: -.03em;
}
/* Reading column */
.language-lab__reading {
position: relative;
max-width: 860px;
}
.language-lab__lead {
max-width: 760px;
margin:
0
0
clamp(24px, 3vw, 36px);
color: var(--primary-color);
font-size:
clamp(30px, 3.1vw, 48px);
font-weight: 500;
line-height: 1.06;
letter-spacing: -.03em;
}
.language-lab__body {
max-width: 800px;
margin: 0;
color: var(--text-main);
font-size:
clamp(18px, 1.5vw, 23px);
font-weight: 300;
line-height: 1.58;
letter-spacing: -.005em;
}
.language-lab__body em,
.language-lab__ink {
color:
color-mix(
in srgb,
#9d4fac 78%,
var(--text-main)
);
font-style: italic;
font-weight: 500;
}
.language-lab__ink {
position: relative;
font-style: normal;
}
.language-lab__ink::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -.08em;
height: 2px;
border-radius: 999px;
background:
linear-gradient(
90deg,
#dc0070,
#9d4faa,
#1546b8
);
transform-origin: left center;
transform:
scaleX(0);
transition:
transform .7s cubic-bezier(.2,.75,.25,1);
}
.language-lab__act.is-visible
.language-lab__ink::after {
transform:
scaleX(1);
}
/* ---------------------------------------------------------
Word field – terms float in quietly
--------------------------------------------------------- */
.language-lab__wordfield {
position: relative;
min-height:
clamp(170px, 18vw, 250px);
margin-top:
clamp(38px, 5vw, 64px);
overflow: hidden;
}
.language-token {
position: absolute;
display: inline-flex;
align-items: center;
min-height: 34px;
padding:
7px
12px;
border:
1px solid
color-mix(
in srgb,
var(--border-color) 86%,
transparent
);
border-radius: 999px;
background:
color-mix(
in srgb,
var(--card-bg) 94%,
transparent
);
color: var(--text-muted);
font-size:
clamp(13px, 1vw, 16px);
font-weight: 500;
line-height: 1;
opacity: 0;
transition:
opacity .55s ease,
transform .8s cubic-bezier(.2,.75,.25,1);
}
.language-token--1 {
left: 4%;
top: 17%;
transform:
translate(-34px, 18px);
}
.language-token--2 {
right: 10%;
top: 11%;
transform:
translate(34px, -14px);
}
.language-token--3 {
left: 25%;
bottom: 14%;
transform:
translate(-22px, 28px);
}
.language-token--4 {
right: 26%;
bottom: 22%;
transform:
translate(26px, 22px);
}
.language-lab__act.is-visible
.language-token {
opacity: 1;
transform: none;
}
.language-lab__act.is-visible
.language-token--2 {
transition-delay: .08s;
}
.language-lab__act.is-visible
.language-token--3 {
transition-delay: .16s;
}
.language-lab__act.is-visible
.language-token--4 {
transition-delay: .24s;
}
/* ---------------------------------------------------------
Transition strip
--------------------------------------------------------- */
.language-lab__switch {
position: relative;
min-height:
clamp(150px, 17vw, 230px);
margin:
clamp(-22px, -1vw, -8px)
0
clamp(68px, 8vw, 108px);
display: grid;
place-items: center;
overflow: hidden;
}
.language-lab__switch-track {
display: grid;
grid-template-columns:
auto
minmax(80px, 260px)
auto;
align-items: center;
gap:
clamp(14px, 2vw, 28px);
width:
min(
900px,
92%
);
}
.language-lab__switch-old,
.language-lab__switch-new {
font-size:
clamp(28px, 4.2vw, 64px);
font-weight: 600;
line-height: 1;
letter-spacing: -.04em;
transition:
opacity .65s ease,
transform .8s cubic-bezier(.2,.75,.25,1);
}
.language-lab__switch-old {
color:
color-mix(
in srgb,
var(--text-main) 22%,
transparent
);
opacity: .9;
transform:
translateX(26px);
}
.language-lab__switch-new {
color:
color-mix(
in srgb,
#9d4fac 82%,
var(--primary-color)
);
opacity: .3;
transform:
translateX(-26px);
}
.language-lab__switch-line {
height: 2px;
border-radius: 999px;
background:
linear-gradient(
90deg,
rgba(220,0,112,.45),
rgba(157,79,170,.70),
rgba(21,70,184,.45)
);
transform:
scaleX(.2);
transform-origin: center;
transition:
transform .85s cubic-bezier(.2,.75,.25,1);
}
.language-lab__switch.is-visible
.language-lab__switch-old {
opacity: .26;
transform:
translateX(-10px);
}
.language-lab__switch.is-visible
.language-lab__switch-new {
opacity: 1;
transform:
translateX(10px);
}
.language-lab__switch.is-visible
.language-lab__switch-line {
transform:
scaleX(1);
}
/* ---------------------------------------------------------
Rewrite rows
--------------------------------------------------------- */
.language-lab__rewrite {
display: grid;
gap: 14px;
margin-top:
clamp(36px, 4.5vw, 58px);
}
.language-rewrite {
display: grid;
grid-template-columns:
minmax(0, 1fr)
44px
minmax(0, 1.25fr);
align-items: center;
gap: 12px;
padding:
16px
0;
border-bottom:
1px solid
color-mix(
in srgb,
var(--border-color) 88%,
transparent
);
opacity: .44;
transform:
translateY(16px);
transition:
opacity .55s ease,
transform .7s cubic-bezier(.2,.75,.25,1);
}
.language-rewrite.is-visible {
opacity: 1;
transform: none;
}
.language-rewrite__old {
position: relative;
color: var(--text-muted);
font-size:
clamp(15px, 1.25vw, 18px);
font-weight: 300;
line-height: 1.3;
opacity: .58;
}
.language-rewrite__old::after {
content: "";
position: absolute;
left: 0;
top: 52%;
width: 100%;
height: 1px;
background:
color-mix(
in srgb,
#d34a87 52%,
var(--text-muted)
);
transform-origin: left center;
transform:
scaleX(0);
transition:
transform .7s cubic-bezier(.2,.75,.25,1);
}
.language-rewrite.is-visible
.language-rewrite__old::after {
transform:
scaleX(1);
}
.language-rewrite__arrow {
text-align: center;
color:
color-mix(
in srgb,
#9d4fac 68%,
var(--text-muted)
);
font-size: 20px;
}
.language-rewrite__new {
color: var(--text-main);
font-size:
clamp(16px, 1.35vw, 20px);
font-weight: 500;
line-height: 1.28;
}
/* ---------------------------------------------------------
Finale
--------------------------------------------------------- */
.language-lab__final {
position: relative;
display: grid;
place-items: center;
min-height:
clamp(240px, 28vw, 360px);
margin-top:
clamp(28px, 4vw, 54px);
overflow: hidden;
}
.language-lab__final-kicker {
position: absolute;
top: 22%;
margin: 0;
color: var(--text-muted);
font-size:
clamp(11px, .9vw, 14px);
font-weight: 500;
letter-spacing: .16em;
opacity: .46;
}
.language-lab__final-word {
position: relative;
color:
color-mix(
in srgb,
#9d4fac 82%,
var(--primary-color)
);
font-size:
clamp(
64px,
10vw,
150px
);
font-weight: 600;
line-height: .86;
letter-spacing: -.055em;
opacity: .3;
transform:
scale(.84);
transition:
opacity .7s ease,
transform .9s cubic-bezier(.2,.75,.25,1);
}
.language-lab__final.is-visible
.language-lab__final-word {
opacity: 1;
transform:
scale(1);
}
/* =========================================================
Dark mode
========================================================= */
body.pcdark-mode
.biconic-language-lab,
html.pcdark-mode body
.biconic-language-lab {
background: #000;
}
body.pcdark-mode
.language-token,
html.pcdark-mode body
.language-token {
background:
rgba(255,255,255,.045);
border-color:
rgba(255,255,255,.09);
}
/* =========================================================
Mobile
========================================================= */
@media (max-width: 760px) {
.language-lab__inner {
width:
calc(
100% - 28px
);
padding:
62px
0
76px;
}
.language-lab__header {
margin-bottom: 46px;
}
.language-lab__title {
font-size:
clamp(
56px,
17vw,
84px
);
line-height: .86;
}
.language-lab__title span {
margin-left:
clamp(
22px,
9vw,
44px
);
}
.language-lab__subtitle {
margin-top: 18px;
font-size:
clamp(
16px,
4.7vw,
20px
);
}
.language-lab__act {
margin-bottom: 58px;
}
.language-lab__act-grid {
grid-template-columns:
1fr;
gap: 14px;
}
.language-lab__margin {
position: relative;
top: auto;
flex-direction: row;
align-items: baseline;
gap: 10px;
padding: 0;
}
.language-lab__margin-number {
font-size: 20px;
}
.language-lab__margin-word {
writing-mode: horizontal-tb;
transform: none;
font-size: 14px;
letter-spacing: .12em;
}
.language-lab__lead {
margin-bottom: 18px;
font-size:
clamp(
24px,
7vw,
31px
);
line-height: 1.08;
}
.language-lab__body {
font-size:
clamp(
16px,
4.35vw,
18px
);
line-height: 1.52;
}
.language-lab__wordfield {
min-height: 150px;
margin-top: 28px;
}
.language-token {
min-height: 29px;
padding:
5px
9px;
font-size: 11px;
}
.language-token--1 {
left: 0;
top: 12%;
}
.language-token--2 {
right: 0;
top: 4%;
}
.language-token--3 {
left: 13%;
bottom: 14%;
}
.language-token--4 {
right: 10%;
bottom: 23%;
}
.language-lab__switch {
min-height: 130px;
margin:
-8px
0
52px;
}
.language-lab__switch-track {
grid-template-columns:
1fr;
justify-items: center;
gap: 10px;
}
.language-lab__switch-line {
width: 72%;
}
.language-lab__switch-old,
.language-lab__switch-new {
font-size:
clamp(
30px,
9vw,
42px
);
}
.language-rewrite {
grid-template-columns:
1fr;
gap: 7px;
padding:
14px
0;
}
.language-rewrite__arrow {
transform:
rotate(90deg);
text-align: left;
padding-left: 4px;
}
.language-rewrite__old {
font-size: 14px;
}
.language-rewrite__new {
font-size: 16px;
}
.language-lab__final {
min-height: 220px;
}
.language-lab__final-word {
font-size:
clamp(
58px,
17vw,
86px
);
}
}
/* =========================================================
Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
.language-lab__act,
.language-token,
.language-lab__switch-old,
.language-lab__switch-new,
.language-lab__switch-line,
.language-rewrite,
.language-rewrite__old::after,
.language-lab__final-word,
.language-lab__ink::after {
transition: none !important;
}
.language-lab__act,
.language-token,
.language-lab__switch-old,
.language-lab__switch-new,
.language-rewrite,
.language-lab__final-word {
opacity: 1 !important;
transform: none !important;
}
.language-lab__switch-line,
.language-rewrite__old::after,
.language-lab__ink::after {
transform: scaleX(1) !important;
}
}
/* =========================================================
SECTION 08 · PRÄVENTION & GESUNDHEIT · v67
Health Compass + Versorgungspfad
========================================================= */
.biconic-health {
position: relative;
z-index: 3;
width: 100%;
margin: 0;
overflow: clip;
color: var(--text-main);
background: var(--bg-color);
scroll-margin-top:
calc(
var(--biconic-nav-top, 0px)
+ 86px
);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
var(--font-family, "Barlow Semi Condensed", Arial, sans-serif)
);
}
.biconic-health__inner {
width:
min(
1160px,
calc(100% - 40px)
);
margin: 0 auto;
padding:
clamp(76px, 8vw, 116px)
0
clamp(88px, 9vw, 132px);
}
/* Header */
.biconic-health__header {
max-width: 980px;
margin-bottom:
clamp(48px, 6vw, 78px);
}
.biconic-health__index {
margin:
0
0
12px;
color: var(--text-muted);
font-size:
clamp(12px, .9vw, 15px);
font-weight: 500;
line-height: 1;
letter-spacing: .16em;
}
.biconic-health__title {
margin: 0;
color: var(--primary-color);
font-size:
clamp(
58px,
8.6vw,
132px
);
font-weight: 600;
line-height: .84;
letter-spacing: -.055em;
}
.biconic-health__title span {
display: block;
color:
color-mix(
in srgb,
#9d4faf 64%,
var(--primary-color)
);
font-weight: 300;
}
.biconic-health__subtitle {
max-width: 720px;
margin:
clamp(20px, 2.2vw, 30px)
0
0;
color: var(--text-muted);
font-size:
clamp(18px, 1.55vw, 25px);
font-weight: 300;
line-height: 1.35;
}
/* =========================================================
Health compass
========================================================= */
.health-compass {
position: relative;
width:
min(
820px,
100%
);
aspect-ratio: 16 / 8;
margin:
0 auto
clamp(54px, 7vw, 86px);
display: grid;
place-items: center;
opacity: .48;
transform:
scale(.94);
transition:
opacity .7s ease,
transform .9s cubic-bezier(.2,.75,.25,1);
}
.health-compass.is-visible {
opacity: 1;
transform:
scale(1);
}
.health-compass__core {
position: relative;
z-index: 3;
display: grid;
place-items: center;
width:
clamp(130px, 15vw, 190px);
aspect-ratio: 1;
border-radius: 50%;
}
.health-compass__core-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border:
1px solid
color-mix(
in srgb,
#9d4faf 30%,
var(--border-color)
);
opacity: .5;
transform:
scale(.72);
transition:
transform .9s cubic-bezier(.2,.75,.25,1),
opacity .7s ease;
}
.health-compass__core-ring--2 {
inset: -18px;
}
.health-compass__core-ring--3 {
inset: -38px;
opacity: .28;
}
.health-compass.is-visible
.health-compass__core-ring--1 {
transform: scale(1);
}
.health-compass.is-visible
.health-compass__core-ring--2 {
transform: scale(1.06);
}
.health-compass.is-visible
.health-compass__core-ring--3 {
transform: scale(1.12);
}
.health-compass__core-label {
position: relative;
z-index: 4;
display: grid;
text-align: center;
color:
color-mix(
in srgb,
#9d4faf 82%,
var(--primary-color)
);
font-size:
clamp(30px, 3.5vw, 50px);
font-weight: 600;
line-height: .9;
letter-spacing: -.03em;
}
.health-compass__core-label small {
margin-top: 6px;
color: var(--text-muted);
font-size: 10px;
font-weight: 500;
letter-spacing: .14em;
}
.health-compass__axes {
position: absolute;
inset: 0;
z-index: 1;
}
.health-compass__axes span {
position: absolute;
left: 50%;
top: 50%;
width: 39%;
height: 1px;
background:
linear-gradient(
90deg,
color-mix(
in srgb,
#9d4faf 34%,
transparent
),
transparent
);
transform-origin: left center;
transform:
scaleX(.15);
transition:
transform .9s cubic-bezier(.2,.75,.25,1);
}
.health-compass__axes span:nth-child(1) {
transform:
rotate(-28deg)
scaleX(.15);
}
.health-compass__axes span:nth-child(2) {
transform:
rotate(28deg)
scaleX(.15);
}
.health-compass__axes span:nth-child(3) {
transform:
rotate(152deg)
scaleX(.15);
}
.health-compass__axes span:nth-child(4) {
transform:
rotate(208deg)
scaleX(.15);
}
.health-compass.is-visible
.health-compass__axes span:nth-child(1) {
transform:
rotate(-28deg)
scaleX(1);
}
.health-compass.is-visible
.health-compass__axes span:nth-child(2) {
transform:
rotate(28deg)
scaleX(1);
}
.health-compass.is-visible
.health-compass__axes span:nth-child(3) {
transform:
rotate(152deg)
scaleX(1);
}
.health-compass.is-visible
.health-compass__axes span:nth-child(4) {
transform:
rotate(208deg)
scaleX(1);
}
.health-compass__node {
position: absolute;
z-index: 2;
padding:
7px
11px;
border:
1px solid
color-mix(
in srgb,
var(--border-color) 84%,
transparent
);
border-radius: 999px;
background:
color-mix(
in srgb,
var(--card-bg) 94%,
transparent
);
color: var(--text-muted);
font-size:
clamp(11px, .9vw, 14px);
font-weight: 600;
line-height: 1;
letter-spacing: .08em;
opacity: 0;
transform:
scale(.8);
transition:
opacity .55s ease,
transform .7s cubic-bezier(.2,.75,.25,1);
}
.health-compass__node--1 {
left: 7%;
top: 16%;
}
.health-compass__node--2 {
right: 1%;
top: 16%;
}
.health-compass__node--3 {
left: 8%;
bottom: 14%;
}
.health-compass__node--4 {
right: 8%;
bottom: 14%;
}
.health-compass.is-visible
.health-compass__node {
opacity: 1;
transform:
scale(1);
}
.health-compass.is-visible
.health-compass__node--2 {
transition-delay: .08s;
}
.health-compass.is-visible
.health-compass__node--3 {
transition-delay: .16s;
}
.health-compass.is-visible
.health-compass__node--4 {
transition-delay: .24s;
}
/* =========================================================
Intro
========================================================= */
.health-intro {
max-width: 880px;
margin:
0 auto
clamp(70px, 8vw, 108px);
padding-left:
clamp(0px, 3vw, 36px);
border-left:
3px solid
color-mix(
in srgb,
#9d4faf 54%,
var(--border-color)
);
opacity: .45;
transform:
translateY(20px);
transition:
opacity .6s ease,
transform .75s cubic-bezier(.2,.75,.25,1);
}
.health-intro.is-visible {
opacity: 1;
transform: none;
}
.health-intro p {
margin: 0;
color: var(--text-main);
font-size:
clamp(21px, 2vw, 30px);
font-weight: 300;
line-height: 1.48;
letter-spacing: -.012em;
}
/* =========================================================
Pathway
========================================================= */
.health-pathway {
position: relative;
display: grid;
gap:
clamp(50px, 6vw, 82px);
}
.health-pathway::before {
content: "";
position: absolute;
left: 30px;
top: 30px;
bottom: 30px;
width: 2px;
background:
linear-gradient(
180deg,
rgba(220,0,112,.48),
rgba(157,79,170,.58),
rgba(21,70,184,.48)
);
opacity: .38;
}
.health-step {
position: relative;
display: grid;
grid-template-columns:
62px
minmax(0, 1fr);
gap:
clamp(28px, 4vw, 52px);
opacity: .48;
transform:
translateY(26px);
transition:
opacity .6s ease,
transform .8s cubic-bezier(.2,.75,.25,1);
}
.health-step.is-visible {
opacity: 1;
transform: none;
}
.health-step__rail {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
}
.health-step__dot {
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin-top: 4px;
border-radius: 50%;
border:
1px solid
color-mix(
in srgb,
#9d4faf 38%,
var(--border-color)
);
background: var(--card-bg);
color:
color-mix(
in srgb,
#9d4faf 78%,
var(--text-main)
);
font-size: 11px;
font-weight: 600;
line-height: 1;
}
.health-step__content {
position: relative;
max-width: 900px;
padding-bottom:
clamp(24px, 3vw, 38px);
border-bottom:
1px solid
color-mix(
in srgb,
var(--border-color) 88%,
transparent
);
}
.health-step__eyebrow {
margin:
0
0
9px;
color:
color-mix(
in srgb,
#9d4faf 78%,
var(--text-main)
);
font-size:
clamp(11px, .9vw, 14px);
font-weight: 600;
line-height: 1.15;
letter-spacing: .12em;
}
.health-step__heading {
max-width: 760px;
margin:
0
0
clamp(18px, 2vw, 24px);
color: var(--primary-color);
font-size:
clamp(27px, 2.8vw, 42px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.03em;
}
.health-step__text {
max-width: 830px;
margin:
0
0
18px;
color: var(--text-main);
font-size:
clamp(18px, 1.45vw, 22px);
font-weight: 300;
line-height: 1.55;
}
.health-step__text:last-of-type {
margin-bottom: 0;
}
.health-step__text em {
color:
color-mix(
in srgb,
#9d4faf 76%,
var(--text-main)
);
font-style: italic;
font-weight: 500;
}
/* mental health signal */
.health-step__signal {
position: relative;
width:
min(
420px,
100%
);
height: 74px;
margin-top:
30px;
overflow: hidden;
}
.health-pulse {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(157,79,175,.55),
transparent
);
transform:
scaleX(.2);
transform-origin: left center;
opacity: .24;
transition:
transform .85s cubic-bezier(.2,.75,.25,1),
opacity .65s ease;
}
.health-pulse--2 {
top: 35%;
width: 82%;
}
.health-pulse--3 {
top: 65%;
width: 70%;
}
.health-pulse--4 {
top: 20%;
width: 48%;
}
.health-step.is-visible
.health-pulse {
transform:
scaleX(1);
opacity: .62;
}
/* health tags */
.health-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 26px;
}
.health-tags span {
display: inline-flex;
padding:
6px
11px;
border:
1px solid
color-mix(
in srgb,
var(--border-color) 86%,
transparent
);
border-radius: 999px;
background:
color-mix(
in srgb,
var(--card-bg) 94%,
transparent
);
color: var(--text-muted);
font-size:
clamp(12px, .9vw, 14px);
font-weight: 500;
opacity: 0;
transform:
translateY(8px);
transition:
opacity .45s ease,
transform .55s cubic-bezier(.2,.75,.25,1);
}
.health-step.is-visible
.health-tags span {
opacity: 1;
transform: none;
}
.health-step.is-visible
.health-tags span:nth-child(2) {
transition-delay: .06s;
}
.health-step.is-visible
.health-tags span:nth-child(3) {
transition-delay: .12s;
}
.health-step.is-visible
.health-tags span:nth-child(4) {
transition-delay: .18s;
}
.health-step.is-visible
.health-tags span:nth-child(5) {
transition-delay: .24s;
}
/* access bars */
.health-access {
position: relative;
display: flex;
align-items: flex-end;
gap: 8px;
width:
min(
360px,
100%
);
height: 96px;
margin-top: 30px;
}
.health-access__bar {
flex: 1;
min-width: 28px;
border-radius:
8px
8px
2px
2px;
background:
linear-gradient(
180deg,
rgba(220,0,112,.44),
rgba(157,79,170,.28)
);
transform-origin: bottom;
transform:
scaleY(.2);
opacity: .28;
transition:
transform .75s cubic-bezier(.2,.75,.25,1),
opacity .55s ease;
}
.health-access__bar--1 {
height: 44%;
}
.health-access__bar--2 {
height: 67%;
}
.health-access__bar--3 {
height: 86%;
}
.health-access__bar--4 {
height: 58%;
}
.health-step.is-visible
.health-access__bar {
transform:
scaleY(1);
opacity: .68;
}
.health-access__label {
position: absolute;
right: -4px;
top: 0;
color: var(--text-muted);
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
}
/* ally */
.health-ally {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 30px;
}
.health-ally span {
display: grid;
place-items: center;
min-height: 70px;
padding:
12px;
border:
1px solid
color-mix(
in srgb,
var(--border-color) 86%,
transparent
);
border-radius: 16px;
color: var(--text-muted);
background:
color-mix(
in srgb,
var(--card-bg) 94%,
transparent
);
font-size:
clamp(11px, .9vw, 14px);
font-weight: 600;
line-height: 1.1;
text-align: center;
opacity: 0;
transform:
translateY(10px);
transition:
opacity .45s ease,
transform .6s cubic-bezier(.2,.75,.25,1),
border-color .45s ease;
}
.health-step.is-visible
.health-ally span {
opacity: 1;
transform: none;
}
.health-step.is-visible
.health-ally span:nth-child(2) {
transition-delay: .07s;
}
.health-step.is-visible
.health-ally span:nth-child(3) {
transition-delay: .14s;
}
.health-step.is-visible
.health-ally span:nth-child(4) {
transition-delay: .21s;
}
/* Final */
.health-final {
position: relative;
display: grid;
place-items: center;
min-height:
clamp(230px, 27vw, 350px);
margin-top:
clamp(56px, 7vw, 92px);
text-align: center;
opacity: .44;
transform:
scale(.94);
transition:
opacity .7s ease,
transform .9s cubic-bezier(.2,.75,.25,1);
}
.health-final.is-visible {
opacity: 1;
transform:
scale(1);
}
.health-final__kicker {
margin:
0
0
14px;
color: var(--text-muted);
font-size:
11px;
font-weight: 600;
letter-spacing: .16em;
}
.health-final__main {
max-width: 900px;
margin: 0;
color:
color-mix(
in srgb,
#9d4faf 82%,
var(--primary-color)
);
font-size:
clamp(
42px,
6.4vw,
92px
);
font-weight: 600;
line-height: .92;
letter-spacing: -.05em;
}
/* Dark mode */
body.pcdark-mode
.biconic-health,
html.pcdark-mode body
.biconic-health {
background: #000;
}
body.pcdark-mode
.health-step__dot,
body.pcdark-mode
.health-compass__node,
body.pcdark-mode
.health-tags span,
body.pcdark-mode
.health-ally span,
html.pcdark-mode body
.health-step__dot,
html.pcdark-mode body
.health-compass__node,
html.pcdark-mode body
.health-tags span,
html.pcdark-mode body
.health-ally span {
background:
rgba(255,255,255,.045);
border-color:
rgba(255,255,255,.09);
}
/* Mobile */
@media (max-width: 760px) {
.biconic-health__inner {
width:
calc(
100% - 28px
);
padding:
62px
0
76px;
}
.biconic-health__title {
font-size:
clamp(
52px,
15.5vw,
78px
);
}
.biconic-health__subtitle {
margin-top: 17px;
font-size:
clamp(
16px,
4.65vw,
20px
);
}
.health-compass {
aspect-ratio: 1 / 1.08;
margin-bottom: 48px;
}
.health-compass__core {
width: 124px;
}
.health-compass__node {
padding:
5px
8px;
font-size: 9px;
}
.health-compass__node--1 {
left: 0;
top: 14%;
}
.health-compass__node--2 {
right: 0;
top: 14%;
max-width: 112px;
text-align: center;
}
.health-compass__node--3 {
left: 0;
bottom: 15%;
}
.health-compass__node--4 {
right: 0;
bottom: 15%;
}
.health-intro {
margin-bottom: 58px;
padding-left: 18px;
}
.health-intro p {
font-size:
clamp(
18px,
5vw,
22px
);
}
.health-pathway {
gap: 44px;
}
.health-pathway::before {
left: 17px;
}
.health-step {
grid-template-columns:
36px
minmax(0, 1fr);
gap: 12px;
}
.health-step__dot {
width: 34px;
height: 34px;
font-size: 9px;
}
.health-step__heading {
margin-bottom: 16px;
font-size:
clamp(
23px,
6.8vw,
30px
);
}
.health-step__text {
font-size:
clamp(
16px,
4.35vw,
18px
);
line-height: 1.5;
}
.health-tags {
gap: 6px;
margin-top: 20px;
}
.health-tags span {
padding:
5px
9px;
font-size: 11px;
}
.health-ally {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 22px;
}
.health-ally span {
min-height: 58px;
padding: 9px;
border-radius: 13px;
font-size: 10px;
}
.health-final {
min-height: 220px;
margin-top: 46px;
}
.health-final__main {
font-size:
clamp(
40px,
11.5vw,
60px
);
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.health-compass,
.health-compass__core-ring,
.health-compass__axes span,
.health-compass__node,
.health-intro,
.health-step,
.health-pulse,
.health-tags span,
.health-access__bar,
.health-ally span,
.health-final {
transition: none !important;
}
.health-compass,
.health-compass__node,
.health-intro,
.health-step,
.health-tags span,
.health-ally span,
.health-final {
opacity: 1 !important;
transform: none !important;
}
.health-compass__axes span,
.health-pulse,
.health-access__bar {
transform: none !important;
}
}
/* =========================================================
SECTION 09 · FAQS · v68
Klickbares Accordion
========================================================= */
.biconic-faq {
position: relative;
z-index: 3;
width: 100%;
margin: 0;
overflow: clip;
color: var(--text-main);
background: var(--bg-color);
scroll-margin-top:
calc(
var(--biconic-nav-top, 0px)
+ 86px
);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
var(--font-family, "Barlow Semi Condensed", Arial, sans-serif)
);
}
.biconic-faq__inner {
width:
min(
1040px,
calc(100% - 40px)
);
margin: 0 auto;
padding:
clamp(74px, 8vw, 112px)
0
clamp(86px, 9vw, 126px);
}
/* Header */
.biconic-faq__header {
max-width: 860px;
margin-bottom:
clamp(42px, 5vw, 66px);
}
.biconic-faq__index {
margin:
0
0
12px;
color: var(--text-muted);
font-size:
clamp(12px, .9vw, 15px);
font-weight: 500;
line-height: 1;
letter-spacing: .16em;
}
.biconic-faq__title {
margin: 0;
color: var(--primary-color);
font-size:
clamp(
68px,
8.8vw,
132px
);
font-weight: 600;
line-height: .84;
letter-spacing: -.055em;
}
.biconic-faq__subtitle {
max-width: 680px;
margin:
clamp(18px, 2vw, 26px)
0
0;
color: var(--text-muted);
font-size:
clamp(18px, 1.5vw, 24px);
font-weight: 300;
line-height: 1.35;
}
/* FAQ list */
.biconic-faq__list {
display: grid;
gap: 14px;
}
.faq-item {
border:
1px solid
color-mix(
in srgb,
var(--border-color) 88%,
transparent
);
border-radius:
20px;
background:
color-mix(
in srgb,
var(--card-bg) 96%,
transparent
);
box-shadow:
0 14px 40px
color-mix(
in srgb,
#000 4%,
transparent
);
overflow: hidden;
opacity: .74;
transform:
translateY(12px);
transition:
opacity .45s ease,
transform .55s cubic-bezier(.2,.75,.25,1),
border-color .4s ease,
box-shadow .4s ease;
}
.faq-item.is-visible {
opacity: 1;
transform: none;
}
.faq-item.is-open {
border-color:
color-mix(
in srgb,
#9d4fae 34%,
var(--border-color)
);
box-shadow:
0 18px 50px
color-mix(
in srgb,
#9d4fae 8%,
transparent
);
}
.faq-item__heading {
margin: 0;
}
.faq-item__button {
display: grid;
grid-template-columns:
42px
minmax(0, 1fr)
38px;
align-items: center;
gap:
clamp(12px, 2vw, 20px);
width: 100%;
padding:
clamp(20px, 2.4vw, 28px)
clamp(18px, 2.6vw, 30px);
border: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
font: inherit;
-webkit-tap-highlight-color: transparent;
}
.faq-item__button:focus-visible {
outline:
3px solid
color-mix(
in srgb,
#9d4fae 34%,
transparent
);
outline-offset: -3px;
}
.faq-item__number {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border:
1px solid
color-mix(
in srgb,
var(--border-color) 86%,
transparent
);
border-radius: 50%;
color: var(--text-muted);
font-size: 10px;
font-weight: 600;
line-height: 1;
letter-spacing: .08em;
transition:
color .35s ease,
border-color .35s ease,
transform .4s ease;
}
.faq-item.is-open
.faq-item__number {
color:
color-mix(
in srgb,
#9d4fae 82%,
var(--text-main)
);
border-color:
color-mix(
in srgb,
#9d4fae 42%,
var(--border-color)
);
transform:
scale(1.06);
}
.faq-item__question {
color: var(--primary-color);
font-size:
clamp(20px, 1.8vw, 28px);
font-weight: 500;
line-height: 1.18;
letter-spacing: -.02em;
}
.faq-item__icon {
position: relative;
width: 30px;
height: 30px;
justify-self: end;
border-radius: 50%;
background:
color-mix(
in srgb,
#9d4fae 8%,
var(--card-bg)
);
transition:
transform .42s cubic-bezier(.2,.75,.25,1),
background .35s ease;
}
.faq-item__icon::before,
.faq-item__icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 1.5px;
border-radius: 999px;
background:
color-mix(
in srgb,
#9d4fae 78%,
var(--text-main)
);
transform:
translate(-50%, -50%);
}
.faq-item__icon::after {
transform:
translate(-50%, -50%)
rotate(90deg);
transition:
opacity .3s ease,
transform .4s ease;
}
.faq-item.is-open
.faq-item__icon {
transform:
rotate(180deg);
background:
color-mix(
in srgb,
#9d4fae 14%,
var(--card-bg)
);
}
.faq-item.is-open
.faq-item__icon::after {
opacity: 0;
transform:
translate(-50%, -50%)
rotate(90deg)
scaleX(.2);
}
/* Answer */
.faq-item__answer {
overflow: hidden;
}
.faq-item__answer[hidden] {
display: block !important;
height: 0;
visibility: hidden;
}
.faq-item__answer-inner {
padding:
0
clamp(18px, 2.6vw, 30px)
clamp(22px, 2.6vw, 30px)
calc(
clamp(18px, 2.6vw, 30px)
+ 42px
+ clamp(12px, 2vw, 20px)
);
}
.faq-item__answer-inner p {
max-width: 820px;
margin: 0;
color: var(--text-main);
font-size:
clamp(17px, 1.35vw, 21px);
font-weight: 300;
line-height: 1.55;
}
.faq-item__answer-inner strong {
color:
color-mix(
in srgb,
#9d4fae 82%,
var(--text-main)
);
font-weight: 600;
}
/* Dark mode */
body.pcdark-mode
.biconic-faq,
html.pcdark-mode body
.biconic-faq {
background: #000;
}
body.pcdark-mode
.faq-item,
html.pcdark-mode body
.faq-item {
background:
rgba(24,24,27,.96);
border-color:
rgba(255,255,255,.09);
box-shadow:
0 14px 40px
rgba(0,0,0,.24);
}
/* Mobile */
@media (max-width: 760px) {
.biconic-faq__inner {
width:
calc(
100% - 28px
);
padding:
62px
0
76px;
}
.biconic-faq__title {
font-size:
clamp(
58px,
17vw,
86px
);
}
.biconic-faq__subtitle {
margin-top: 16px;
font-size:
clamp(
16px,
4.6vw,
20px
);
}
.biconic-faq__list {
gap: 10px;
}
.faq-item {
border-radius: 17px;
}
.faq-item__button {
grid-template-columns:
32px
minmax(0, 1fr)
28px;
gap: 10px;
padding:
17px
14px;
}
.faq-item__number {
width: 28px;
height: 28px;
font-size: 9px;
}
.faq-item__question {
font-size:
clamp(
18px,
5.2vw,
22px
);
line-height: 1.2;
}
.faq-item__icon {
width: 26px;
height: 26px;
}
.faq-item__answer-inner {
padding:
0
14px
18px
calc(
14px
+ 32px
+ 10px
);
}
.faq-item__answer-inner p {
font-size:
clamp(
15.5px,
4.2vw,
17px
);
line-height: 1.5;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.faq-item,
.faq-item__number,
.faq-item__icon,
.faq-item__icon::after,
.faq-item__answer {
transition: none !important;
}
.faq-item {
opacity: 1 !important;
transform: none !important;
}
}
/* =========================================================
ZUSAMMENARBEIT & BETEILIGUNG · v69
========================================================= */
.biconic-collaboration {
position: relative;
z-index: 3;
width: 100%;
margin: 0;
overflow: clip;
color: var(--text-main);
background:
color-mix(
in srgb,
var(--card-bg) 94%,
var(--bg-color)
);
border-top:
1px solid
color-mix(
in srgb,
var(--border-color) 86%,
transparent
);
font-family:
var(
--wp--preset--font-family--barlow-semi-condensed,
var(--font-family, "Barlow Semi Condensed", Arial, sans-serif)
);
}
.biconic-collaboration__inner {
width:
min(
1080px,
calc(100% - 40px)
);
margin: 0 auto;
padding:
clamp(58px, 6vw, 82px)
0
clamp(64px, 7vw, 92px);
}
.biconic-collaboration__header {
max-width: 760px;
margin:
0 auto
clamp(34px, 4vw, 50px);
text-align: center;
}
.biconic-collaboration__eyebrow {
margin:
0
0
10px;
color:
color-mix(
in srgb,
#9d4fae 76%,
var(--text-main)
);
font-size:
clamp(11px, .85vw, 13px);
font-weight: 600;
line-height: 1;
letter-spacing: .15em;
}
.biconic-collaboration__title {
margin: 0;
color: var(--primary-color);
font-size:
clamp(
36px,
4.8vw,
68px
);
font-weight: 600;
line-height: .95;
letter-spacing: -.04em;
}
.biconic-collaboration__text {
max-width: 680px;
margin:
16px
auto
0;
color: var(--text-muted);
font-size:
clamp(16px, 1.25vw, 19px);
font-weight: 300;
line-height: 1.45;
}
.biconic-collaboration__logos {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap:
clamp(14px, 2vw, 22px);
align-items: stretch;
}
.collab-logo {
display: grid;
grid-template-rows:
minmax(120px, 1fr)
auto;
align-items: center;
min-width: 0;
padding:
clamp(18px, 2vw, 24px);
border:
1px solid
color-mix(
in srgb,
var(--border-color) 86%,
transparent
);
border-radius: 20px;
background:
color-mix(
in srgb,
var(--card-bg) 97%,
transparent
);
box-shadow:
0 12px 34px
color-mix(
in srgb,
#000 4%,
transparent
);
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}
.collab-logo:hover {
transform:
translateY(-3px);
border-color:
color-mix(
in srgb,
#9d4fae 30%,
var(--border-color)
);
box-shadow:
0 16px 40px
color-mix(
in srgb,
#9d4fae 7%,
transparent
);
}
.collab-logo__media {
display: grid;
place-items: center;
min-height: 120px;
}
.collab-logo__media img {
display: block;
width: 100%;
height: auto;
max-width:
min(
220px,
90%
);
max-height: 110px;
object-fit: contain;
object-position: center;
}
.collab-logo--bipride
.collab-logo__media img {
max-height: 96px;
border-radius: 8px;
}
.collab-logo--iwwit
.collab-logo__media img {
max-width:
min(
240px,
92%
);
}
.collab-logo__label {
margin:
12px
0
0;
color: var(--text-muted);
font-size:
clamp(12px, .9vw, 14px);
font-weight: 500;
line-height: 1.2;
text-align: center;
}
/* Dark mode */
body.pcdark-mode
.biconic-collaboration,
html.pcdark-mode body
.biconic-collaboration {
background: #0b0b0c;
border-top-color:
rgba(255,255,255,.08);
}
body.pcdark-mode
.collab-logo,
html.pcdark-mode body
.collab-logo {
background:
rgba(255,255,255,.035);
border-color:
rgba(255,255,255,.08);
box-shadow:
0 12px 34px
rgba(0,0,0,.22);
}
/* Mobile */
@media (max-width: 760px) {
.biconic-collaboration__inner {
width:
calc(
100% - 28px
);
padding:
50px
0
60px;
}
.biconic-collaboration__header {
margin-bottom: 28px;
}
.biconic-collaboration__title {
font-size:
clamp(
34px,
10vw,
48px
);
}
.biconic-collaboration__text {
font-size: 16px;
}
.biconic-collaboration__logos {
grid-template-columns: 1fr;
gap: 12px;
}
.collab-logo {
grid-template-columns:
minmax(120px, .8fr)
1.2fr;
grid-template-rows: 1fr;
gap: 16px;
padding:
16px
18px;
}
.collab-logo__media {
min-height: 82px;
}
.collab-logo__media img {
max-width: 150px;
max-height: 78px;
}
.collab-logo__label {
margin: 0;
text-align: left;
font-size: 13px;
}
}
/* Very small screens */
@media (max-width: 390px) {
.collab-logo {
grid-template-columns: 1fr;
gap: 8px;
}
.collab-logo__label {
text-align: center;
}
}
/* =========================================================
SECTION 04 · BI+ IN ZAHLEN · v70
Kompakte Info links + wechselndes Bild rechts
========================================================= */
.biconic-stats {
--stats-media-radius: 24px;
}
/* Intro etwas kompakter */
.biconic-stats__intro {
margin-bottom:
clamp(
28px,
3.5vw,
46px
) !important;
}
/*
* Die Sticky-Fläche bleibt erhalten, die Karte selbst
* wird jedoch deutlich kleiner und ruhiger.
*/
.biconic-stats__sticky-wrap {
display: flex;
align-items: flex-start;
justify-content: center;
}
.biconic-stats__card--media {
display: grid !important;
grid-template-columns:
minmax(0, .92fr)
minmax(320px, 1.08fr) !important;
gap: 0 !important;
width:
min(
1040px,
100%
) !important;
min-height:
clamp(
360px,
35vw,
470px
) !important;
padding: 0 !important;
border-radius:
var(--stats-media-radius) !important;
overflow: hidden;
background:
var(--card-bg) !important;
box-shadow:
0 18px 48px
color-mix(
in srgb,
#000 6%,
transparent
) !important;
}
/* Linke Infoseite */
.biconic-stats__info-pane {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding:
clamp(
28px,
4vw,
48px
);
background:
var(--card-bg);
}
.biconic-stats__meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom:
clamp(
16px,
2vw,
24px
);
}
.biconic-stats__card-index {
position: static !important;
display: inline-block;
margin: 0 !important;
color: var(--text-muted);
font-size:
clamp(
11px,
.8vw,
13px
) !important;
line-height: 1;
letter-spacing: .14em;
}
.biconic-stats__card-word {
position: static !important;
margin: 0 !important;
color: var(--primary-color);
font-size:
clamp(
12px,
.95vw,
15px
) !important;
font-weight: 600 !important;
line-height: 1;
letter-spacing: .13em;
}
/* Zahl kleiner als vorher, aber weiter klarer Fokus */
.biconic-stats__card-value {
margin:
0
0
clamp(
18px,
2vw,
24px
) !important;
font-size:
clamp(
72px,
8vw,
118px
) !important;
line-height:
.78 !important;
letter-spacing:
-.055em !important;
}
.biconic-stats__card-value.is-word-value {
font-size:
clamp(
42px,
5vw,
72px
) !important;
line-height:
.9 !important;
}
.biconic-stats__text-side {
display: block !important;
min-width: 0;
}
.biconic-stats__text-side h3 {
max-width: 500px;
margin:
0
0
12px !important;
color: var(--primary-color);
font-size:
clamp(
24px,
2.25vw,
34px
) !important;
font-weight:
500 !important;
line-height:
1.08 !important;
letter-spacing:
-.028em;
}
.biconic-stats__text-side p {
max-width: 520px;
margin: 0 !important;
color: var(--text-main);
font-size:
clamp(
16px,
1.28vw,
20px
) !important;
line-height:
1.48 !important;
}
/* Fortschrittslinie bleibt links im Infobereich */
.biconic-stats__info-pane
.biconic-stats__progress {
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
height: 2px !important;
margin-top:
clamp(
24px,
3vw,
36px
);
background:
color-mix(
in srgb,
var(--border-color) 88%,
transparent
) !important;
}
.biconic-stats__info-pane
.biconic-stats__progress span {
background:
linear-gradient(
90deg,
#dc0070,
#9d4faa,
#1546b8
) !important;
}
/* Rechte Bildseite */
.biconic-stats__image-pane {
position: relative;
min-width: 0;
min-height: 100%;
margin: 0;
overflow: hidden;
background:
color-mix(
in srgb,
var(--bg-color) 80%,
#000
);
}
.biconic-stats__image-pane::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(0,0,0,.08),
transparent 22%
);
}
.biconic-stats__image-pane img {
display: block;
width: 100%;
height: 100%;
min-height:
clamp(
360px,
35vw,
470px
);
object-fit: cover;
object-position: center;
opacity: 1;
transform:
scale(1);
transition:
opacity .28s ease,
transform .5s
cubic-bezier(.2,.75,.25,1);
}
.biconic-stats__image-pane img.is-changing {
opacity: .18;
transform:
scale(1.025);
}
/*
* Alte Layout-Spalten aus früheren Versionen neutralisieren.
*/
.biconic-stats__card--media
.biconic-stats__number-side {
display: none !important;
}
/* Story insgesamt etwas kompakter */
.biconic-stats__trigger {
min-height:
clamp(
360px,
58vh,
560px
) !important;
}
/* =========================================================
Dark mode
========================================================= */
body.pcdark-mode
.biconic-stats__card--media,
body.pcdark-mode
.biconic-stats__info-pane,
html.pcdark-mode body
.biconic-stats__card--media,
html.pcdark-mode body
.biconic-stats__info-pane {
background:
#1c1c1e !important;
}
/* =========================================================
Mobile: Information oben, Bild direkt darunter
========================================================= */
@media (max-width: 760px) {
.biconic-stats__intro {
margin-bottom:
24px !important;
}
.biconic-stats__card--media {
grid-template-columns:
1fr !important;
width: 100% !important;
min-height:
0 !important;
border-radius:
20px !important;
}
.biconic-stats__info-pane {
min-height: 0;
padding:
22px
18px
20px;
}
.biconic-stats__meta-row {
margin-bottom: 15px;
}
.biconic-stats__card-value {
margin-bottom:
16px !important;
font-size:
clamp(
64px,
20vw,
90px
) !important;
}
.biconic-stats__card-value.is-word-value {
font-size:
clamp(
38px,
12vw,
54px
) !important;
}
.biconic-stats__text-side h3 {
font-size:
clamp(
22px,
6.6vw,
28px
) !important;
}
.biconic-stats__text-side p {
font-size:
clamp(
15.5px,
4.3vw,
17px
) !important;
}
.biconic-stats__info-pane
.biconic-stats__progress {
margin-top:
20px;
}
.biconic-stats__image-pane {
min-height:
clamp(
220px,
67vw,
320px
);
}
.biconic-stats__image-pane img {
min-height:
clamp(
220px,
67vw,
320px
);
max-height:
340px;
}
.biconic-stats__image-pane::after {
background:
linear-gradient(
180deg,
rgba(0,0,0,.06),
transparent 20%
);
}
/*
* Scrollabschnitte auf Mobile kürzer,
* damit sechs Fakten + sechs Bilder nicht unnötig lang werden.
*/
.biconic-stats__trigger {
min-height:
clamp(
300px,
48vh,
430px
) !important;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.biconic-stats__image-pane img {
transition:
none !important;
}
}
/* =========================================================
SECTION 04 · BI+ IN ZAHLEN · v71
Mobile kompakter + Sticky exakt unter Navigation
========================================================= */
/*
* Die JS-Messung setzt --stats-sticky-top auf die tatsächliche
* Unterkante der BICONIC-Navigation.
*/
.biconic-stats__sticky-wrap {
top:
var(
--stats-sticky-top,
calc(
var(--biconic-nav-top, 0px)
+ 76px
)
) !important;
min-height: 0 !important;
height:
calc(
100svh
- var(--stats-sticky-top, 86px)
- 12px
) !important;
align-items: flex-start !important;
padding-top: 0 !important;
}
/*
* Desktop: Karte bleibt kompakt und beginnt direkt unter der Navigation.
*/
@media (min-width: 761px) {
.biconic-stats__card--media {
max-height:
calc(
100svh
- var(--stats-sticky-top, 86px)
- 22px
);
}
}
/* =========================================================
MOBILE
Oben kompakte 2-Spalten-Info:
Zahl links / Titel + Text rechts
Bild darunter
========================================================= */
@media (max-width: 760px) {
.biconic-stats__inner {
padding-top:
58px !important;
}
.biconic-stats__story {
overflow: visible !important;
}
.biconic-stats__sticky-wrap {
top:
var(
--stats-sticky-top,
78px
) !important;
height:
calc(
100svh
- var(--stats-sticky-top, 78px)
- 8px
) !important;
min-height:
0 !important;
align-items:
flex-start !important;
}
.biconic-stats__card--media {
display: grid !important;
grid-template-columns:
1fr !important;
min-height:
0 !important;
max-height:
calc(
100svh
- var(--stats-sticky-top, 78px)
- 10px
) !important;
border-radius:
18px !important;
}
/*
* Info-Pane selbst wird zum Grid.
* Meta oben, Zahl links, Text rechts, Progress unten.
*/
.biconic-stats__info-pane {
display: grid !important;
grid-template-columns:
minmax(82px, .72fr)
minmax(0, 1.55fr);
grid-template-areas:
"meta meta"
"value text"
"progress progress";
align-items:
start;
column-gap:
14px;
row-gap:
10px;
padding:
14px
14px
12px
!important;
}
.biconic-stats__meta-row {
grid-area: meta;
display: flex;
margin: 0 !important;
min-height: 18px;
}
.biconic-stats__card-index {
font-size:
9px !important;
}
.biconic-stats__card-word {
max-width: 58%;
font-size:
10px !important;
line-height:
1.1 !important;
text-align: right;
overflow-wrap: anywhere;
}
.biconic-stats__card-value {
grid-area: value;
align-self: start;
width: auto !important;
max-width: 100% !important;
margin:
3px
0
0
!important;
font-size:
clamp(
44px,
13.5vw,
62px
) !important;
line-height:
.84 !important;
white-space: nowrap;
}
.biconic-stats__card-value.is-word-value {
font-size:
clamp(
23px,
7vw,
34px
) !important;
line-height:
.92 !important;
white-space:
normal !important;
overflow-wrap:
anywhere;
}
.biconic-stats__text-side {
grid-area: text;
align-self: start;
padding-top:
0;
}
.biconic-stats__text-side h3 {
margin:
0
0
5px
!important;
font-size:
clamp(
16px,
4.5vw,
20px
) !important;
line-height:
1.08 !important;
letter-spacing:
-.02em !important;
}
.biconic-stats__text-side p {
margin:
0 !important;
font-size:
clamp(
12px,
3.35vw,
14px
) !important;
line-height:
1.38 !important;
}
.biconic-stats__info-pane
.biconic-stats__progress {
grid-area: progress;
width: 100% !important;
margin:
2px
0
0
!important;
height:
2px !important;
}
/*
* Foto erhält mehr Platz, weil der Textblock oben deutlich kleiner ist.
*/
.biconic-stats__image-pane {
min-height:
clamp(
245px,
66vw,
330px
) !important;
}
.biconic-stats__image-pane img {
width: 100%;
height: 100%;
min-height:
clamp(
245px,
66vw,
330px
) !important;
max-height:
340px !important;
object-fit: cover;
}
/*
* Sechs Fakten bleiben klar voneinander getrennt,
* aber die gesamte Scrollgeschichte wird kompakter.
*/
.biconic-stats__story {
min-height:
360vh !important;
}
.biconic-stats__trigger {
height:
calc(
360vh / 6
) !important;
min-height:
0 !important;
}
}
/* Sehr kleine Geräte */
@media (max-width: 390px) {
.biconic-stats__info-pane {
grid-template-columns:
minmax(72px, .68fr)
minmax(0, 1.55fr);
column-gap:
11px;
padding:
12px
12px
11px
!important;
}
.biconic-stats__card-value {
font-size:
40px !important;
}
.biconic-stats__text-side h3 {
font-size:
15px !important;
}
.biconic-stats__text-side p {
font-size:
11.5px !important;
}
}
/* =========================================================
SECTION 04 · BI+ IN ZAHLEN · v72
Bildwechsel als gestapelte Bilder + sichtbarer Bildcredit
========================================================= */
/*
* Statt ein einzelnes ![]()
per src auszutauschen, liegen
* alle sechs Fotos bereits übereinander im DOM.
* Der aktive Fakt schaltet exakt das passende Foto sichtbar.
* Das ist robuster – auch bei schnellem Scrollen auf Mobile.
*/
.biconic-stats__image-stack {
position: absolute;
inset: 0;
overflow: hidden;
}
.biconic-stats__image-item {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
min-height: 100% !important;
object-fit: cover;
object-position: center;
opacity: 0;
transform:
scale(1.025);
transition:
opacity .42s ease,
transform .62s
cubic-bezier(.2,.75,.25,1);
pointer-events: none;
}
.biconic-stats__image-item.is-active {
opacity: 1;
transform:
scale(1);
z-index: 2;
}
/*
* Bildbeschriftung / Credit bleibt immer sichtbar.
*/
.biconic-stats__image-caption {
position: absolute;
left: 12px;
right: 12px;
bottom: 10px;
z-index: 5;
width: fit-content;
max-width:
calc(100% - 24px);
margin: 0;
padding:
5px
8px;
border-radius: 999px;
background:
rgba(0,0,0,.52);
color:
rgba(255,255,255,.90);
font-size:
clamp(
10px,
.8vw,
12px
);
font-weight: 400;
line-height: 1.1;
letter-spacing: .01em;
backdrop-filter:
blur(8px);
-webkit-backdrop-filter:
blur(8px);
}
/*
* Alte Ein-Bild-Regeln neutralisieren.
*/
.biconic-stats__image-pane > img {
display: none !important;
}
/* Mobile */
@media (max-width: 760px) {
.biconic-stats__image-pane {
position: relative;
min-height:
clamp(
238px,
63vw,
310px
) !important;
}
.biconic-stats__image-stack {
min-height: inherit;
}
.biconic-stats__image-item {
min-height: inherit !important;
}
.biconic-stats__image-caption {
left: 9px;
bottom: 8px;
max-width:
calc(100% - 18px);
padding:
4px
7px;
font-size:
10px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.biconic-stats__image-item {
transition: none !important;
}
}
/* =========================================================
SECTION 04 · BI+ IN ZAHLEN · v73
Alle 6 Bilder eager + WP-Beschriftungen dynamisch
========================================================= */
/*
* Alle sechs Bilder werden jetzt eager geladen.
* Das verhindert, dass unsichtbare, absolut positionierte
* Bilder vom Browser wegen loading="lazy" nicht rechtzeitig
* geladen werden.
*/
.biconic-stats__image-item {
visibility: visible;
}
/*
* Beschriftungen liegen analog zu den Bildern übereinander.
* Nur die Beschriftung des aktiven Bildes ist sichtbar.
*/
.biconic-stats__caption-stack {
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
}
.biconic-stats__image-caption {
position: absolute !important;
left: 12px !important;
right: auto !important;
bottom: 10px !important;
z-index: 7 !important;
display: block;
width: fit-content;
max-width:
calc(100% - 24px);
margin: 0 !important;
padding:
5px
8px !important;
border-radius: 999px;
background:
rgba(0,0,0,.56) !important;
color:
rgba(255,255,255,.94) !important;
font-size:
clamp(
10px,
.8vw,
12px
) !important;
font-weight:
400 !important;
line-height:
1.2 !important;
letter-spacing:
.01em;
opacity: 0;
transform:
translateY(5px);
transition:
opacity .30s ease,
transform .38s ease;
backdrop-filter:
blur(8px);
-webkit-backdrop-filter:
blur(8px);
}
.biconic-stats__image-caption.is-active {
opacity: 1;
transform: none;
}
/*
* WordPress-Beschriftungen können Links oder Inline-Markup enthalten.
* Diese übernehmen die helle Credit-Darstellung.
*/
.biconic-stats__image-caption a,
.biconic-stats__image-caption span,
.biconic-stats__image-caption strong,
.biconic-stats__image-caption em {
color: inherit !important;
}
/* Mobile */
@media (max-width: 760px) {
.biconic-stats__image-caption {
left: 9px !important;
bottom: 8px !important;
max-width:
calc(100% - 18px);
padding:
4px
7px !important;
font-size:
10px !important;
border-radius:
9px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.biconic-stats__image-caption {
transition: none !important;
}
}
/* =========================================================
SECTION 04 · BI+ IN ZAHLEN · v74
WP-Full-URL + Bild füllt auf Mobile den gesamten Restbereich
========================================================= */
/*
* Mobile-Karte ist exakt so hoch wie der sichtbare Bereich
* unterhalb der Sticky-Navigation.
* Zeile 1 = kompakter Infoblock
* Zeile 2 = gesamter verbleibender Platz für das Foto
*/
@media (max-width: 760px) {
.biconic-stats__card--media {
display: grid !important;
grid-template-columns:
1fr !important;
grid-template-rows:
auto
minmax(0, 1fr) !important;
height:
calc(
100svh
- var(--stats-sticky-top, 78px)
- 8px
) !important;
min-height:
0 !important;
max-height:
none !important;
overflow:
hidden !important;
}
.biconic-stats__info-pane {
min-height:
0 !important;
height:
auto !important;
}
.biconic-stats__image-pane {
position: relative;
width: 100%;
height: 100% !important;
min-height:
0 !important;
max-height:
none !important;
align-self:
stretch;
overflow:
hidden;
}
.biconic-stats__image-stack {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height:
0 !important;
}
.biconic-stats__image-item {
position: absolute;
inset: 0;
width: 100%;
height: 100% !important;
min-height:
0 !important;
max-height:
none !important;
object-fit:
cover !important;
object-position:
center center;
}
/*
* Caption bleibt innerhalb des nun vollständig
* ausgefüllten Bildbereichs unten sichtbar.
*/
.biconic-stats__caption-stack {
position: absolute;
inset: 0;
}
}
/*
* Auf sehr kleinen Geräten den oberen Block noch etwas
* enger halten, damit möglichst viel Fläche fürs Foto bleibt.
*/
@media (max-width: 390px) {
.biconic-stats__info-pane {
row-gap:
7px !important;
padding:
10px
11px
9px
!important;
}
.biconic-stats__meta-row {
min-height:
14px;
}
.biconic-stats__info-pane
.biconic-stats__progress {
margin-top:
0 !important;
}
}
/* =========================================================
SECTION 04 · BI+ IN ZAHLEN · v75
Vollflächiges Mobile-Bild + stärkere Bild-Regeln
========================================================= */
/*
* Diese Selektoren sind absichtlich spezifischer als die alten
* ".biconic-stats__image-pane img"-Regeln aus v70/v71.
* Dadurch kann kein altes max-height mehr die Bildhöhe begrenzen.
*/
.biconic-stats__image-pane
img.biconic-stats__image-item {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center !important;
}
/*
* Der Stack ist immer exakt so groß wie die gesamte Bild-Pane.
*/
.biconic-stats__image-pane
.biconic-stats__image-stack {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: none !important;
max-height: none !important;
}
/* =========================================================
Mobile: alles unter dem Info-Block IST Bild
========================================================= */
@media (max-width: 760px) {
.biconic-stats__card--media {
display: grid !important;
grid-template:
"info" auto
"image" minmax(0, 1fr)
/ 1fr !important;
width: 100% !important;
height:
calc(
100dvh
- var(--stats-sticky-top, 78px)
- 8px
) !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
.biconic-stats__info-pane {
grid-area: info;
flex: none !important;
min-height: 0 !important;
max-height: none !important;
height: auto !important;
}
.biconic-stats__image-pane {
grid-area: image;
position: relative !important;
align-self: stretch !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
overflow: hidden !important;
}
.biconic-stats__image-pane
img.biconic-stats__image-item {
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
max-height: none !important;
object-fit: cover !important;
}
/*
* Kein grauer Restbereich:
* die Pane selbst bekommt dieselbe Hintergrundfarbe wie
* ein geladenes Foto nur als Sicherheitsfallback.
*/
.biconic-stats__image-pane {
background:
#242229 !important;
}
}
/* Safari / ältere iOS-Versionen ohne zuverlässiges dvh */
@supports not (height: 100dvh) {
@media (max-width: 760px) {
.biconic-stats__card--media {
height:
calc(
100svh
- var(--stats-sticky-top, 78px)
- 8px
) !important;
}
}
}
/* =========================================================
SECTION 04 · BI+ IN ZAHLEN · v76
Originalbilder vollständig sichtbar – KEIN CROPPING
========================================================= */
/*
* Die Bildfläche selbst nutzt weiterhin den kompletten
* verbleibenden Bereich der Sticky-Karte.
*
* Das Foto wird darin aber NICHT mehr beschnitten:
* object-fit: contain.
*/
.biconic-stats__image-pane {
background:
#222027 !important;
}
.biconic-stats__image-pane
.biconic-stats__image-stack {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
.biconic-stats__image-pane
img.biconic-stats__image-item {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit:
contain !important;
object-position:
center center !important;
background:
#222027;
opacity: 0;
transform:
none !important;
}
.biconic-stats__image-pane
img.biconic-stats__image-item.is-active {
opacity: 1;
}
/*
* Kein Scale-Effekt mehr beim Wechsel.
* Dadurch bleibt der originale Bildausschnitt immer exakt erhalten.
*/
.biconic-stats__image-item,
.biconic-stats__image-item.is-active,
.biconic-stats__image-item.is-changing {
transform:
none !important;
}
/* =========================================================
Mobile
Info oben – der KOMPLETTE Rest ist Bildfläche.
========================================================= */
@media (max-width: 760px) {
.biconic-stats__card--media {
display: grid !important;
grid-template-rows:
auto
minmax(0, 1fr)
!important;
height:
calc(
100dvh
- var(--stats-sticky-top, 78px)
- 8px
) !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
.biconic-stats__info-pane {
min-height: 0 !important;
height: auto !important;
}
.biconic-stats__image-pane {
position: relative !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
align-self:
stretch !important;
margin: 0 !important;
overflow:
hidden !important;
}
.biconic-stats__image-pane
.biconic-stats__image-stack {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.biconic-stats__image-pane
img.biconic-stats__image-item {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit:
contain !important;
object-position:
center center !important;
}
}
/* Safari fallback */
@supports not (height: 100dvh) {
@media (max-width: 760px) {
.biconic-stats__card--media {
height:
calc(
100svh
- var(--stats-sticky-top, 78px)
- 8px
) !important;
}
}
}
/* =========================================================
SECTION 04 · BI+ IN ZAHLEN · v77
Neue Bildtechnik: EIN Background-Layer statt 6 ![]()
========================================================= */
.biconic-stats__background-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: #222027;
opacity: 1;
transition:
opacity .24s ease;
}
.biconic-stats__background-image.is-changing {
opacity: .72;
}
/* Alte Bild-Layer sicher deaktivieren */
.biconic-stats__image-stack,
.biconic-stats__image-item,
.biconic-stats__image-pane > img {
display: none !important;
}
/* Mobile – kompletter Restbereich = Bild-Pane */
@media (max-width: 760px) {
.biconic-stats__card--media {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows:
auto
minmax(0, 1fr)
!important;
height:
calc(
100dvh
- var(--stats-sticky-top, 78px)
- 8px
) !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
.biconic-stats__info-pane {
min-height: 0 !important;
height: auto !important;
}
.biconic-stats__image-pane {
position: relative !important;
align-self: stretch !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
overflow: hidden !important;
background: #222027 !important;
}
.biconic-stats__background-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
}
/*
* contain zeigt das Original vollständig.
* cover würde die Fläche füllen, dabei aber beschneiden.
*/
/* Safari-Fallback */
@supports not (height: 100dvh) {
@media (max-width: 760px) {
.biconic-stats__card--media {
height:
calc(
100svh
- var(--stats-sticky-top, 78px)
- 8px
) !important;
}
}
}
@media (prefers-reduced-motion: reduce) {
.biconic-stats__background-image {
transition: none !important;
}
}
/* =========================================================
HEADER · v78
Neue Illustration + cover + etwas stärker sichtbar
========================================================= */
.biconic-mesh::before {
background-image:
url("https://wp-testvorschau.de/wp-content/uploads/2026/09/Illustration_Biconic-scaled.jpg") !important;
background-size:
cover !important;
background-position:
center center !important;
background-repeat:
no-repeat !important;
opacity:
.22 !important;
}
@media (max-width: 760px) {
.biconic-mesh::before {
background-size:
cover !important;
background-position:
center center !important;
opacity:
.18 !important;
}
}
@media (min-width: 1440px) {
.biconic-mesh::before {
opacity:
.24 !important;
}
}
/* =========================================================
HEADER · v81
Mobile: Illustration sichtbarer + rechts ausgerichtet
========================================================= */
@media (max-width: 760px) {
/*
* Das Bild beginnt an der rechten Kante statt zentriert.
* Die Bild-Ebene wird etwas sichtbarer, während die
* dunkle seitliche Abdunklung reduziert wird.
*/
.biconic-mesh::before {
background-size:
cover !important;
background-position:
right center !important;
background-repeat:
no-repeat !important;
opacity:
.24 !important;
}
/*
* Weniger dunkle Überlagerung auf Mobile = mehr vom
* eigentlichen Motiv sichtbar.
*/
.biconic-mesh::after {
background:
linear-gradient(
90deg,
rgba(0,0,0,.34) 0%,
rgba(0,0,0,.20) 6%,
rgba(0,0,0,.10) 12%,
rgba(0,0,0,.03) 18%,
rgba(0,0,0,0) 26%,
rgba(0,0,0,0) 78%,
rgba(0,0,0,.02) 86%,
rgba(0,0,0,.06) 93%,
rgba(0,0,0,.12) 100%
) !important;
}
}
/* =========================================================
BICONIC · EINHEITLICHE KAPITELÜBERSCHRIFTEN · v84
Alle 9 Sektionen gleich, bewusst nicht zu groß.
========================================================= */
.biconic-section-kicker {
display: block !important;
margin: 0 0 clamp(13px, 1.35vw, 20px) !important;
padding: 0 !important;
color: #4f8fc3 !important;
font-family: var(--wp--preset--font-family--barlow-semi-condensed, var(--font-family, "Barlow Semi Condensed", Arial, sans-serif)) !important;
font-size: clamp(13px, .88vw, 16px) !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
}
.biconic-section-title {
width: min(1020px, 100%) !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
color: #2d4156 !important;
font-family: var(--wp--preset--font-family--barlow-semi-condensed, var(--font-family, "Barlow Semi Condensed", Arial, sans-serif)) !important;
font-size: clamp(44px, 4.8vw, 72px) !important;
font-weight: 600 !important;
line-height: .98 !important;
letter-spacing: -.045em !important;
text-transform: none !important;
}
.biconic-section-title span {
color: transparent !important;
background: linear-gradient(90deg, #df0071 0%, #b63c92 38%, #7450b7 68%, #405fd2 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
font-weight: inherit !important;
}
.biconic-info__content,
.biconic-erasure__intro,
.biconic-myths__intro,
.biconic-stats__intro,
.biconic-history__intro,
.community-cards__header,
.language-lab__header,
.biconic-health__header,
.biconic-faq__header {
max-width: 1020px !important;
}
.biconic-info__title + *,
.biconic-erasure__title + *,
.biconic-myths__title + *,
.biconic-stats__title + *,
.biconic-history__title + *,
.community-cards__title + *,
.language-lab__title + *,
.biconic-health__title + *,
.biconic-faq__title + * {
margin-top: clamp(17px, 1.8vw, 25px) !important;
}
.community-cards__index.biconic-section-kicker,
.language-lab__index.biconic-section-kicker,
.biconic-health__index.biconic-section-kicker,
.biconic-faq__index.biconic-section-kicker {
position: static !important;
width: auto !important;
height: auto !important;
opacity: 1 !important;
transform: none !important;
}
.language-lab__title.biconic-section-title > span,
.biconic-health__title.biconic-section-title > span {
display: inline !important;
margin-left: 0 !important;
}
body.pcdark-mode .biconic-section-title,
html.pcdark-mode body .biconic-section-title {
color: #f1f3f5 !important;
}
body.pcdark-mode .biconic-section-kicker,
html.pcdark-mode body .biconic-section-kicker {
color: #78add6 !important;
}
@media (max-width: 1024px) {
.biconic-section-title {
font-size: clamp(40px, 5.8vw, 60px) !important;
}
}
@media (max-width: 760px) {
.biconic-section-kicker {
margin-bottom: 11px !important;
font-size: clamp(11px, 3vw, 13px) !important;
letter-spacing: .19em !important;
}
.biconic-section-title {
font-size: clamp(32px, 8.8vw, 42px) !important;
line-height: 1.01 !important;
letter-spacing: -.038em !important;
}
.biconic-info__title + *,
.biconic-erasure__title + *,
.biconic-myths__title + *,
.biconic-stats__title + *,
.biconic-history__title + *,
.community-cards__title + *,
.language-lab__title + *,
.biconic-health__title + *,
.biconic-faq__title + * {
margin-top: 14px !important;
}
}
@media (max-width: 390px) {
.biconic-section-title {
font-size: clamp(30px, 8.5vw, 38px) !important;
}
}
/* =========================================================
SECTION 01 · BI+ · v16
Fester Bildkasten + horizontale Scrollbewegung im Bild
========================================================= */
.biconic-info {
--info-image-pan-x: 0px;
}
/* Rahmen bleibt fest: kein Einfahren, kein Y-Parallax, kein Fading */
.biconic-info__media-wrap {
transform: none !important;
opacity: 1 !important;
will-change: auto !important;
}
.biconic-info__content {
transform: none !important;
opacity: 1 !important;
will-change: auto !important;
}
/* Gruppenbild bekommt horizontalen Spielraum innerhalb des Rahmens. */
.biconic-info__image {
left: 50% !important;
top: 50% !important;
width: 128% !important;
height: 112% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center center !important;
transform:
translate3d(
calc(-50% + var(--info-image-pan-x)),
-50%,
0
)
scale(1.01) !important;
will-change: transform !important;
}
/* Der Glow bleibt an den Rahmen gebunden und bewegt sich nicht mit. */
.biconic-info__image-glow {
transform: none !important;
}
@media (max-width: 980px) {
.biconic-info__image {
width: 126% !important;
height: 112% !important;
transform:
translate3d(
calc(-50% + var(--info-image-pan-x)),
-50%,
0
)
scale(1.01) !important;
}
}
@media (max-width: 760px) {
.biconic-info__image {
width: 130% !important;
height: 114% !important;
transform:
translate3d(
calc(-50% + var(--info-image-pan-x)),
-50%,
0
)
scale(1.005) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.biconic-info {
--info-image-pan-x: 0px !important;
}
.biconic-info__image {
transform: translate3d(-50%, -50%, 0) scale(1.01) !important;
}
}
/* =========================================================
PERFORMANCE & SCROLL STABILITY · v86
Weniger Compositing, kein unnötiges Blinken/Springen
========================================================= */
/*
* Nur echte Animationsflächen auf eigene Compositor-Ebene.
* Keine pauschalen will-change-Ebenen für große Inhaltsbereiche.
*/
.biconic-mesh__canvas,
.biconic-stats__background-image,
.biconic-history__rail-progress,
.biconic-info__media img {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/*
* Große Content-Container sollen nicht dauerhaft als GPU-Layer
* reserviert werden. Das reduziert Speicher- und Layer-Flattern.
*/
.biconic-info,
.biconic-erasure,
.biconic-myths,
.biconic-stats,
.biconic-history,
.biconic-community-cards,
.biconic-language-lab,
.biconic-health,
.biconic-faq,
.biconic-collaboration {
will-change: auto !important;
}
/*
* Auf Mobile sind backdrop-filter und große Blur-Composites
* besonders häufig Ursache für kurzes Blinken beim Scrollen.
* Die Optik bleibt durch transparente Hintergründe erhalten.
*/
@media (max-width: 760px) {
.biconic-stats__image-caption,
.biconic-mesh__tooltip,
.biconic-section-nav,
.faq-item,
.language-token,
.language-plus-term {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/*
* Sticky-/Bildflächen gegen Subpixel-Springen stabilisieren.
*/
.biconic-stats__sticky-wrap,
.biconic-history__sticky-shell,
.biconic-section-nav.is-sticky {
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/*
* Scrollende Fotos niemals skalieren, wenn nicht ausdrücklich nötig.
* Opacity/Position sind wesentlich stabiler auf mobilen Browsern.
*/
.biconic-stats__background-image {
transform: none !important;
}
}
/*
* Browser kann Layout außerhalb des Viewports besser verwalten,
* ohne Sticky-Bereiche zu beeinflussen.
*/
.biconic-collaboration,
.biconic-plus-finale {
contain: layout style;
}
/*
* Animationen ausschließlich über transform/opacity.
* Verhindert versehentliche Layout-Transitions auf großen Bereichen.
*/
.biconic-erasure__card,
.biconic-myth-card,
.community-card,
.language-rewrite,
.health-step,
.faq-item {
transition-property:
transform,
opacity,
border-color,
box-shadow !important;
}
/* Reduced Motion bleibt vollständig ruhig. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
}
}
/* =========================================================
FAST SCROLL STABILITY · v87
========================================================= */
html.biconic-fast-scroll .biconic-stats__background-image,
html.biconic-fast-scroll .biconic-erasure__card,
html.biconic-fast-scroll .biconic-erasure__visual-inner,
html.biconic-fast-scroll .biconic-history__scene,
html.biconic-fast-scroll .biconic-history__card,
html.biconic-fast-scroll .biconic-history__year-panel,
html.biconic-fast-scroll .community-card,
html.biconic-fast-scroll .language-rewrite,
html.biconic-fast-scroll .health-step,
html.biconic-fast-scroll .biconic-plus-marker,
html.biconic-fast-scroll .biconic-plus-fluidity,
html.biconic-fast-scroll .biconic-plus-fluidity__image {
transition-duration: 0s !important;
transition-delay: 0s !important;
}
html.biconic-fast-scroll
.biconic-stats__background-image.is-changing {
opacity: 1 !important;
}
@media (max-width: 760px) {
html.biconic-fast-scroll
.biconic-section-nav.is-sticky,
html.biconic-fast-scroll
.biconic-stats__sticky-wrap,
html.biconic-fast-scroll
.biconic-history__sticky-shell {
will-change: auto !important;
}
html.biconic-fast-scroll
.biconic-stats__background-image,
html.biconic-fast-scroll
.biconic-info__media img {
filter: none !important;
}
}
.biconic-collaboration,
.biconic-plus-finale {
content-visibility: auto;
contain-intrinsic-size: 700px;
}
/* =========================================================
SECTION 01 · BI+ · v88
Bild ohne leeren/unsichtbaren Bereich + Schlussabsatz Vollbreite
========================================================= */
/*
* Das Bild zeigt jetzt ausschließlich das Foto.
* Kein nach unten offener Bildbereich, kein Parallax-Versatz,
* der innerhalb des Rahmens leere Fläche sichtbar machen kann.
*/
.biconic-info__image-stage {
aspect-ratio:
3 / 2 !important;
background:
transparent !important;
}
.biconic-info__image {
position:
absolute !important;
inset:
0 !important;
left:
0 !important;
top:
0 !important;
width:
100% !important;
height:
100% !important;
max-width:
none !important;
object-fit:
cover !important;
object-position:
center center !important;
transform:
none !important;
will-change:
auto !important;
}
/*
* Den bisherigen Farb-/Glow-Bereich innerhalb des Bildes entfernen.
* Dadurch bleibt optisch wirklich nur das Foto sichtbar.
*/
.biconic-info__image-stage::after,
.biconic-info__image-glow {
display:
none !important;
}
/*
* Der Bildcontainer selbst wird nicht mehr vertikal verschoben.
* So kann beim schnellen Scrollen keine leere Fläche im Bildrahmen
* entstehen.
*/
.biconic-info__media-wrap {
transform:
none !important;
opacity:
1 !important;
will-change:
auto !important;
}
/*
* Der Text rechts darf weiterhin normal stehen,
* aber ohne horizontales Nachziehen.
*/
.biconic-info__content {
transform:
none !important;
opacity:
1 !important;
will-change:
auto !important;
}
/* =========================================================
Schlussabschnitt über die gesamte Sektion
========================================================= */
.biconic-info__fullwidth {
grid-column:
1 / -1;
width:
100%;
max-width:
none;
margin-top:
clamp(
42px,
5vw,
72px
);
padding-top:
clamp(
30px,
3.5vw,
48px
);
border-top:
1px solid
color-mix(
in srgb,
var(--border-color) 78%,
transparent
);
}
.biconic-info__fullwidth p {
width:
100%;
max-width:
none !important;
margin:
0
0
1.15em !important;
color:
var(--text-main) !important;
font-family:
inherit !important;
font-size:
clamp(
18px,
1.45vw,
22px
) !important;
font-weight:
400 !important;
line-height:
1.58 !important;
}
.biconic-info__fullwidth p:last-child {
margin-bottom:
0 !important;
}
/* Tablet */
@media (max-width: 980px) {
.biconic-info__image-stage {
aspect-ratio:
3 / 2 !important;
}
.biconic-info__fullwidth {
width:
min(
100%,
760px
);
margin:
38px auto 0;
}
}
/* Mobile */
@media (max-width: 760px) {
.biconic-info__image-stage {
aspect-ratio:
3 / 2 !important;
}
.biconic-info__image {
inset:
0 !important;
width:
100% !important;
height:
100% !important;
transform:
none !important;
}
.biconic-info__media-wrap {
transform:
none !important;
margin-bottom:
30px !important;
}
.biconic-info__content {
transform:
none !important;
}
.biconic-info__fullwidth {
width:
100%;
margin-top:
32px;
padding-top:
26px;
}
.biconic-info__fullwidth p {
font-size:
17px !important;
line-height:
1.55 !important;
}
}
/* =========================================================
SECTION 01 · BI+ · v89
Desktop Sticky-Offset + Schlussabschnitt sicher ganz unten
========================================================= */
/*
* Desktop:
* Das Bild klebt erst UNTERHALB der sticky BICONIC-Navigation.
* Der Wert wird per JS aus der realen Nav-Position berechnet.
*/
@media (min-width: 981px) {
.biconic-info {
--info-sticky-top:
154px;
}
.biconic-info__inner {
grid-template-areas:
"content media"
"full full" !important;
grid-template-columns:
minmax(0, .95fr)
minmax(0, 1.05fr) !important;
align-items:
start !important;
}
.biconic-info__content {
grid-area:
content !important;
align-self:
start !important;
}
.biconic-info__media-wrap {
grid-area:
media !important;
position:
sticky !important;
top:
var(
--info-sticky-top,
154px
) !important;
align-self:
start !important;
z-index:
1 !important;
}
/*
* Dieser Block kommt garantiert NACH Text + Bild
* und nimmt die volle Breite der Sektion ein.
*/
.biconic-info__fullwidth {
grid-area:
full !important;
grid-column:
1 / -1 !important;
order:
3 !important;
position:
relative !important;
z-index:
2 !important;
width:
100% !important;
max-width:
none !important;
margin-top:
clamp(
58px,
6vw,
92px
) !important;
clear:
both !important;
}
}
/*
* Tablet/Mobile:
* dort ist das Bild nicht sticky.
* Der Schlussabschnitt bleibt als letztes Element.
*/
@media (max-width: 980px) {
.biconic-info__fullwidth {
order:
3 !important;
position:
relative !important;
width:
100% !important;
}
}
/* =========================================================
SECTION 01 · BI+ · v90
Sticky-Bild darf den Schlussabschnitt nicht überlagern
========================================================= */
/*
* Entscheidende Änderung:
* Text + Bild liegen in einem eigenen .biconic-info__top-Container.
* Das Sticky-Bild kann dadurch nur innerhalb dieses Containers
* sticky sein und wird vor dem Vollbreiten-Text wieder freigegeben.
*/
.biconic-info__inner {
display:
block !important;
grid-template-columns:
none !important;
grid-template-areas:
none !important;
gap:
0 !important;
}
.biconic-info__top {
position:
relative;
width:
100%;
display:
grid;
grid-template-columns:
minmax(0, .95fr)
minmax(0, 1.05fr);
gap:
clamp(
52px,
7vw,
110px
);
align-items:
start;
/*
* Wichtig für position: sticky:
* kein overflow:hidden/clip auf diesem Container.
*/
overflow:
visible;
}
/* Alte Grid-Areas aus v89 neutralisieren */
.biconic-info__content,
.biconic-info__media-wrap,
.biconic-info__fullwidth {
grid-area:
auto !important;
}
@media (min-width: 981px) {
.biconic-info__content {
width:
100% !important;
min-width:
0 !important;
align-self:
start !important;
}
.biconic-info__media-wrap {
position:
sticky !important;
top:
var(
--info-sticky-top,
154px
) !important;
width:
100% !important;
min-width:
0 !important;
align-self:
start !important;
/*
* Kein Transform auf dem sticky Element:
* transform + sticky erzeugt in Safari/Chromium häufiger
* Sprünge oder falsche Stacking-Effekte.
*/
transform:
none !important;
z-index:
1 !important;
}
/*
* Dieser Block liegt außerhalb von .biconic-info__top.
* Das Sticky-Bild ist an der Unterkante von __top bereits
* freigegeben, bevor dieser Text beginnt.
*/
.biconic-info__fullwidth {
position:
relative !important;
z-index:
2 !important;
width:
100% !important;
max-width:
none !important;
margin-top:
clamp(
58px,
6vw,
92px
) !important;
padding-top:
clamp(
30px,
3.5vw,
48px
) !important;
}
}
/* =========================================================
Tablet
========================================================= */
@media (max-width: 980px) {
.biconic-info__top {
display:
flex;
flex-direction:
column;
gap:
0;
}
.biconic-info__media-wrap {
order:
1 !important;
position:
relative !important;
top:
auto !important;
width:
min(
100%,
760px
) !important;
margin:
0 auto 32px !important;
transform:
none !important;
}
.biconic-info__content {
order:
2 !important;
width:
min(
100%,
760px
) !important;
margin:
0 auto !important;
transform:
none !important;
}
.biconic-info__fullwidth {
width:
min(
100%,
760px
) !important;
margin:
38px auto 0 !important;
}
}
/* =========================================================
Mobile
========================================================= */
@media (max-width: 760px) {
.biconic-info__media-wrap {
width:
100% !important;
margin:
0 0 24px !important;
}
.biconic-info__content {
width:
100% !important;
margin:
0 !important;
}
.biconic-info__fullwidth {
width:
100% !important;
margin:
32px 0 0 !important;
}
}
/* =========================================================
SECTION 02 · SICHTBARKEIT · v91
Gleich große Karten / 4 Spalten Desktop
========================================================= */
/*
* Desktop: alle vier Inhalte in EINER Reihe.
* Da sie in derselben Grid-Zeile liegen und stretch verwenden,
* sind alle vier Boxen automatisch exakt gleich hoch.
*/
.biconic-erasure__cards {
display:
grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
grid-auto-rows:
1fr !important;
gap:
clamp(
14px,
1.35vw,
22px
) !important;
align-items:
stretch !important;
}
.biconic-erasure__card {
width:
100% !important;
height:
100% !important;
min-width:
0 !important;
margin:
0 !important;
padding:
clamp(20px, 1.55vw, 26px)
clamp(18px, 1.45vw, 24px)
clamp(22px, 1.7vw, 28px)
clamp(42px, 3vw, 52px)
!important;
display:
flex !important;
align-items:
flex-start !important;
border-radius:
clamp(
18px,
1.5vw,
24px
) !important;
box-sizing:
border-box !important;
}
.biconic-erasure__card-content {
width:
100% !important;
min-width:
0 !important;
}
.biconic-erasure__card h3 {
margin:
0
0
14px
!important;
font-size:
clamp(
24px,
1.75vw,
31px
) !important;
line-height:
1.02 !important;
}
.biconic-erasure__card p {
margin:
0
0
12px
!important;
font-size:
clamp(
14px,
1.02vw,
17px
) !important;
line-height:
1.46 !important;
overflow-wrap:
anywhere;
}
.biconic-erasure__card p:last-child {
margin-bottom:
0 !important;
}
.biconic-erasure__index {
left:
clamp(
14px,
1.3vw,
20px
) !important;
top:
clamp(
22px,
1.7vw,
28px
) !important;
}
/* =========================================================
Kleiner Desktop / Tablet
2 × 2, weiterhin gleich hohe Karten
========================================================= */
@media (max-width: 1180px) {
.biconic-erasure__cards {
grid-template-columns:
repeat(2, minmax(0, 1fr))
!important;
/*
* Beide Reihen erhalten dieselbe Kartenhöhe.
*/
grid-auto-rows:
1fr !important;
gap:
18px !important;
}
.biconic-erasure__card {
padding:
22px
22px
24px
50px
!important;
}
.biconic-erasure__card h3 {
font-size:
clamp(
25px,
2.6vw,
31px
) !important;
}
.biconic-erasure__card p {
font-size:
16px !important;
line-height:
1.48 !important;
}
}
/* =========================================================
Mobile
Eine saubere Spalte, volle Breite
========================================================= */
@media (max-width: 760px) {
.biconic-erasure__cards {
display:
grid !important;
grid-template-columns:
1fr !important;
grid-auto-rows:
auto !important;
gap:
14px !important;
}
.biconic-erasure__card {
width:
100% !important;
height:
auto !important;
min-height:
0 !important;
align-self:
stretch !important;
padding:
20px
18px
22px
46px
!important;
border-radius:
16px !important;
}
/*
* Alte links/rechts versetzte Karten auf Mobile neutralisieren.
*/
.biconic-erasure__card--left,
.biconic-erasure__card--right {
align-self:
stretch !important;
}
.biconic-erasure__card h3 {
margin-bottom:
10px !important;
font-size:
24px !important;
}
.biconic-erasure__card p {
font-size:
16px !important;
line-height:
1.48 !important;
}
.biconic-erasure__index {
left:
15px !important;
top:
23px !important;
}
}
/* =========================================================
SECTION 04 · ZAHLEN · v92
Prozentzeichen / Unterkante nicht mehr abgeschnitten
========================================================= */
/*
* Die sehr enge line-height (.82/.86) hat bei großen Zeichen,
* besonders beim Prozentzeichen, die untere Glyphenkante
* angeschnitten. Deshalb etwas mehr vertikale Luft.
*/
.biconic-stats__card-value {
line-height:
.94 !important;
padding-bottom:
.08em !important;
overflow:
visible !important;
box-sizing:
content-box !important;
}
/*
* Einzelne Bestandteile dürfen ebenfalls nicht clippen.
*/
.biconic-stats__value-prefix,
.biconic-stats__value-number,
.biconic-stats__value-suffix {
line-height:
1 !important;
padding-bottom:
.04em;
overflow:
visible !important;
}
/*
* Der Zahlenbereich selbst bekommt etwas Reserve nach unten.
*/
.biconic-stats__number-side,
.biconic-stats__info-pane {
overflow:
visible !important;
}
/* Desktop */
@media (min-width: 981px) {
.biconic-stats__card-value:not(.is-word-value) {
line-height:
.92 !important;
padding-bottom:
.10em !important;
}
}
/* Tablet */
@media (min-width: 761px) and (max-width: 980px) {
.biconic-stats__card-value:not(.is-word-value) {
line-height:
.94 !important;
padding-bottom:
.08em !important;
}
}
/* Mobile */
@media (max-width: 760px) {
.biconic-stats__card-value:not(.is-word-value) {
line-height:
.96 !important;
padding-bottom:
.06em !important;
}
}
/* =========================================================
SECTION 04 · ZAHLEN · v93
MOBILE: Prozentzeichen vollständig sichtbar
========================================================= */
@media (max-width: 760px) {
/*
* Hauptproblem:
* width:max-content + sehr große Schrift konnte dazu führen,
* dass das Prozentzeichen rechts aus dem verfügbaren Bereich läuft.
*
* Auf Mobile deshalb volle verfügbare Breite verwenden.
*/
.biconic-stats__card-value {
display:
flex !important;
align-items:
baseline !important;
justify-content:
flex-start !important;
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
overflow:
visible !important;
white-space:
nowrap !important;
gap:
.025em !important;
box-sizing:
border-box !important;
padding-right:
.18em !important;
padding-bottom:
.08em !important;
}
.biconic-stats__card-value:not(.is-word-value) {
font-size:
clamp(
34px,
11.4vw,
52px
) !important;
line-height:
.98 !important;
letter-spacing:
-.055em !important;
}
.biconic-stats__value-prefix,
.biconic-stats__value-number,
.biconic-stats__value-suffix {
display:
inline-block !important;
flex:
0 0 auto !important;
min-width:
0 !important;
max-width:
none !important;
overflow:
visible !important;
line-height:
1 !important;
padding:
0 0 .03em 0 !important;
}
.biconic-stats__value-prefix {
margin-right:
.06em !important;
}
.biconic-stats__value-suffix {
margin-left:
.02em !important;
padding-right:
.08em !important;
}
/*
* Die linke Info-Spalte darf das Prozentzeichen
* nicht abschneiden.
*/
.biconic-stats__number-side,
.biconic-stats__info-pane,
.biconic-stats__card--media {
overflow:
visible !important;
}
}
/* Sehr schmale iPhones / kleine Smartphones */
@media (max-width: 390px) {
.biconic-stats__card-value:not(.is-word-value) {
font-size:
clamp(
32px,
10.7vw,
46px
) !important;
letter-spacing:
-.05em !important;
}
.biconic-stats__card-value {
padding-right:
.22em !important;
}
}
/* =========================================================
SECTION 05 · GESCHICHTE · v94
Überschrift + sauberer Timeline-Abschluss
========================================================= */
/*
* "Selbstorganisation" nutzt über .biconic-section-title span
* automatisch den gleichen Bi+ Verlauf wie die anderen Kapitel.
*/
/* =========================================================
Timeline unten nicht mehr hart abschneiden
========================================================= */
/*
* Der äußere Sticky-Bereich darf die Karten / Schatten nicht
* an seiner Unterkante abschneiden.
*/
.biconic-history__sticky-shell {
overflow:
visible !important;
}
/*
* Die Stage selbst darf ebenfalls keine Kartenkante oder
* Box-Shadow abschneiden. Die Inhalte der Karte bleiben über
* .biconic-history__card weiterhin sauber begrenzt.
*/
.biconic-history__stage {
overflow:
visible !important;
padding-bottom:
10px !important;
}
/*
* Ein wenig mehr Luft zum unteren Viewport-Rand.
* So endet die Sticky-Stage sichtbar vor dem unteren Rand
* und wirkt nicht "abgeschnitten".
*/
@media (min-width: 981px) {
.biconic-history {
--history-bottom-gap:
48px !important;
}
.biconic-history__sticky-shell {
height:
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 48px
) !important;
max-height:
calc(
var(--history-viewport-height)
- var(--history-sticky-top)
- 48px
) !important;
}
}
/* =========================================================
Dünnen Strich nach der Timeline entfernen
========================================================= */
/*
* Das war die 1-px-Linie im Outro, die nach unten weiterlief.
*/
.biconic-history__outro::before {
content:
none !important;
display:
none !important;
}
/*
* Outro direkt und sauber nach der Timeline beginnen lassen,
* statt erst einen großen leeren Bereich mit Mittellinie zu zeigen.
*/
.biconic-history__outro {
min-height:
0 !important;
margin-top:
clamp(
54px,
6vw,
88px
) !important;
padding:
clamp(
64px,
7vw,
104px
)
0
clamp(
88px,
9vw,
140px
) !important;
justify-content:
flex-start !important;
}
/* =========================================================
Tablet
========================================================= */
@media (min-width: 761px) and (max-width: 980px) {
.biconic-history {
--history-bottom-gap:
34px !important;
}
.biconic-history__outro {
margin-top:
48px !important;
padding:
64px
0
96px !important;
}
}
/* =========================================================
Mobile
========================================================= */
@media (max-width: 760px) {
.biconic-history {
--history-bottom-gap:
24px !important;
}
.biconic-history__stage {
padding-bottom:
6px !important;
}
.biconic-history__outro {
margin-top:
40px !important;
padding:
54px
0
82px !important;
}
}
/* =========================================================
SECTION 05 · GESCHICHTE · v95
MOBILE TIMELINE STABILISIERUNG
========================================================= */
@media (max-width: 760px) {
/*
* Mehr nutzbare Fläche:
* Sticky-Bereich bleibt unter der Bereichsnavigation,
* aber ohne übermäßige Restabstände.
*/
.biconic-history {
--history-bottom-gap:
14px !important;
}
.biconic-history__sticky-shell {
top:
var(--history-sticky-top) !important;
height:
calc(
100dvh
- var(--history-sticky-top)
- 14px
) !important;
max-height:
calc(
100dvh
- var(--history-sticky-top)
- 14px
) !important;
min-height:
0 !important;
overflow:
visible !important;
align-items:
stretch !important;
}
/*
* Saubere mobile Struktur:
* links Timeline,
* rechts oben Jahr,
* rechts unten Karte.
*/
.biconic-history__stage {
display:
grid !important;
grid-template-columns:
28px
minmax(0, 1fr)
!important;
grid-template-rows:
auto
minmax(0, 1fr)
!important;
gap:
8px
10px
!important;
width:
100% !important;
height:
100% !important;
max-height:
100% !important;
min-height:
0 !important;
padding:
0
0
2px
!important;
overflow:
visible !important;
align-items:
stretch !important;
box-sizing:
border-box !important;
}
.biconic-history__rail {
grid-column:
1 !important;
grid-row:
1 / 3 !important;
width:
28px !important;
height:
100% !important;
min-height:
0 !important;
max-height:
100% !important;
align-self:
stretch !important;
}
.biconic-history__rail-base,
.biconic-history__rail-progress {
top:
10px !important;
bottom:
10px !important;
width:
3px !important;
}
.biconic-history__rail-dot {
width:
13px !important;
height:
13px !important;
border-width:
2px !important;
}
/*
* Jahr kompakter, damit die eigentliche Karte mehr Höhe bekommt.
*/
.biconic-history__year-panel {
grid-column:
2 !important;
grid-row:
1 !important;
width:
100% !important;
height:
auto !important;
min-height:
62px !important;
max-height:
76px !important;
padding:
6px
10px
!important;
margin:
0 !important;
display:
flex !important;
flex-direction:
column !important;
justify-content:
center !important;
border:
0 !important;
border-radius:
0 !important;
background:
transparent !important;
box-shadow:
none !important;
overflow:
visible !important;
}
.biconic-history__stage-index {
position:
static !important;
margin:
0
0
2px
!important;
font-size:
7px !important;
}
.biconic-history__stage-year {
margin:
0 !important;
font-size:
clamp(
27px,
8.5vw,
40px
) !important;
line-height:
.92 !important;
white-space:
nowrap !important;
overflow:
visible !important;
}
.biconic-history__stage-year[data-long-year="true"] {
font-size:
clamp(
18px,
5.6vw,
24px
) !important;
}
.biconic-history__stage-label {
margin-top:
3px !important;
font-size:
8px !important;
line-height:
1.05 !important;
}
/*
* Die Karte ist der flexible Hauptbereich.
* Keine Mindesthöhe, die über den Viewport hinausdrückt.
*/
.biconic-history__card {
grid-column:
2 !important;
grid-row:
2 !important;
width:
100% !important;
height:
100% !important;
min-height:
0 !important;
max-height:
100% !important;
margin:
0 !important;
padding:
12px
11px
10px
!important;
display:
grid !important;
grid-template-rows:
auto
auto
minmax(0, 1fr)
!important;
gap:
8px !important;
overflow:
hidden !important;
border-radius:
16px !important;
box-sizing:
border-box !important;
}
.biconic-history__card-head {
gap:
6px !important;
}
.biconic-history__card-year {
font-size:
clamp(
18px,
5.6vw,
24px
) !important;
line-height:
1 !important;
}
.biconic-history__card-counter {
font-size:
7px !important;
}
.biconic-history__card-body {
min-height:
0 !important;
}
.biconic-history__card-body h3 {
margin:
0
0
5px
!important;
font-size:
clamp(
17px,
5vw,
21px
) !important;
line-height:
1.03 !important;
}
.biconic-history__card-body p {
margin:
0 !important;
font-size:
clamp(
11.5px,
3.25vw,
13px
) !important;
line-height:
1.38 !important;
}
/*
* Visual füllt nur die tatsächlich übrige Kartenhöhe.
* So wird unten nichts abgeschnitten.
*/
.biconic-history__card-visual {
width:
100% !important;
height:
100% !important;
min-height:
0 !important;
max-height:
none !important;
margin-top:
0 !important;
overflow:
hidden !important;
border-radius:
12px !important;
}
/*
* Szenen dürfen die Kartenhöhe nicht erzwingen.
*/
.biconic-history__scene {
min-height:
0 !important;
height:
100% !important;
max-height:
100% !important;
overflow:
hidden !important;
}
/*
* Intro etwas kompakter, damit vor der Timeline weniger
* Leerraum entsteht.
*/
.biconic-history__intro {
margin-bottom:
38px !important;
}
/*
* Outro direkt nach Timeline, ohne übergroßen Zwischenraum.
*/
.biconic-history__outro {
margin-top:
28px !important;
padding:
46px
0
72px
!important;
}
}
/* =========================================================
Sehr kleine Smartphones
========================================================= */
@media (max-width: 390px) {
.biconic-history__sticky-shell {
height:
calc(
100dvh
- var(--history-sticky-top)
- 10px
) !important;
max-height:
calc(
100dvh
- var(--history-sticky-top)
- 10px
) !important;
}
.biconic-history__stage {
grid-template-columns:
24px
minmax(0, 1fr)
!important;
gap:
7px
8px
!important;
}
.biconic-history__rail {
width:
24px !important;
}
.biconic-history__year-panel {
min-height:
56px !important;
max-height:
68px !important;
padding:
5px
8px
!important;
}
.biconic-history__stage-year {
font-size:
clamp(
24px,
8vw,
34px
) !important;
}
.biconic-history__card {
padding:
10px
9px
9px
!important;
gap:
7px !important;
}
.biconic-history__card-body h3 {
font-size:
16px !important;
}
.biconic-history__card-body p {
font-size:
11px !important;
line-height:
1.34 !important;
}
}
/* =========================================================
SECTION 05 · GESCHICHTE · v96
Outro komplett entfernt
========================================================= */
.biconic-history__outro {
display:
none !important;
}
/* =========================================================
SECTION 06 · COMMUNITY(S) · v97
Klarer Kartenaufbau + Mobile stabil
========================================================= */
/*
* Überschrift auf Mobile nicht mehr abgeschnitten.
*/
.community-cards__title.biconic-section-title {
width:
100% !important;
max-width:
100% !important;
overflow:
visible !important;
white-space:
normal !important;
}
/*
* Karten klar untereinander aufbauen:
* Eyebrow / Überschrift / Text / Grafik / Keywords.
*/
.community-card__box {
display:
flex !important;
flex-direction:
column !important;
align-items:
stretch !important;
gap:
0 !important;
overflow:
hidden !important;
}
.community-card__head {
margin:
0 !important;
}
.community-card__heading {
margin-bottom:
12px !important;
}
.community-card__text {
margin:
0 !important;
padding:
0 !important;
}
/*
* Grafik nicht mehr absolut in der Ecke:
* sie bekommt einen eigenen Bereich direkt unter dem Text.
*/
.community-card__visual {
position:
relative !important;
right:
auto !important;
bottom:
auto !important;
left:
auto !important;
top:
auto !important;
width:
min(
100%,
340px
) !important;
height:
112px !important;
margin:
18px
0
14px
!important;
align-self:
flex-start !important;
opacity:
.82 !important;
transform:
none !important;
filter:
saturate(1.28)
contrast(1.05)
!important;
overflow:
visible !important;
}
.community-card.is-visible
.community-card__visual {
opacity:
1 !important;
}
/*
* Grafikformen kräftiger sichtbar.
*/
.community-orbit,
.community-dot,
.community-card__connection,
.community-open {
opacity:
1 !important;
}
/*
* Keywords immer eine Zeile.
* Auf schmalen Screens kleiner statt umbrechen.
*/
.community-card__keywords {
display:
flex !important;
flex-wrap:
nowrap !important;
align-items:
center !important;
gap:
7px !important;
width:
100% !important;
margin:
0 !important;
overflow:
visible !important;
}
.community-card__keywords span {
flex:
0 1 auto !important;
min-width:
0 !important;
white-space:
nowrap !important;
text-overflow:
clip !important;
opacity:
1 !important;
transform:
none !important;
}
/*
* Finalkarte: Pfeil und Begriffe ebenfalls in einer Zeile.
*/
.community-card__keywords--final {
justify-content:
flex-start !important;
}
/* =========================================================
Desktop
========================================================= */
@media (min-width: 981px) {
.community-card__box {
padding:
28px
30px
26px !important;
}
.community-card__visual {
height:
124px !important;
margin-top:
20px !important;
margin-bottom:
16px !important;
}
}
/* =========================================================
Tablet
========================================================= */
@media (min-width: 761px) and (max-width: 980px) {
.community-card__box {
padding:
24px
22px
22px !important;
}
.community-card__visual {
width:
min(
100%,
280px
) !important;
height:
104px !important;
}
.community-card__keywords span {
font-size:
11px !important;
padding:
5px
8px !important;
}
}
/* =========================================================
Mobile
========================================================= */
@media (max-width: 760px) {
.community-cards__inner {
padding-top:
44px !important;
padding-bottom:
58px !important;
}
.community-cards__header {
margin-bottom:
26px !important;
}
.community-cards__title.biconic-section-title {
font-size:
clamp(
38px,
10.5vw,
48px
) !important;
line-height:
1 !important;
letter-spacing:
-.04em !important;
}
.community-cards__subtitle {
margin-top:
10px !important;
}
.community-cards__flow {
gap:
16px !important;
}
.community-card {
grid-template-columns:
38px
minmax(0, 1fr)
!important;
transform:
none !important;
}
.community-cards__rail {
left:
17px !important;
top:
26px !important;
bottom:
26px !important;
}
.community-card__marker {
width:
30px !important;
height:
30px !important;
margin-top:
18px !important;
font-size:
9px !important;
}
.community-card__box {
padding:
18px
14px
16px !important;
border-radius:
18px !important;
}
.community-card__eyebrow {
margin-bottom:
5px !important;
font-size:
10px !important;
}
.community-card__heading {
margin-bottom:
10px !important;
font-size:
clamp(
20px,
5.8vw,
25px
) !important;
line-height:
1.08 !important;
}
.community-card__text {
font-size:
clamp(
15px,
4vw,
17px
) !important;
line-height:
1.46 !important;
padding:
0 !important;
}
/*
* Grafik jetzt unter dem Text und deutlich kräftiger.
*/
.community-card__visual {
width:
min(
100%,
230px
) !important;
height:
88px !important;
margin:
14px
0
12px
!important;
opacity:
1 !important;
filter:
saturate(1.38)
contrast(1.08)
!important;
}
.community-orbit--left,
.community-orbit--right {
width:
62px !important;
height:
62px !important;
}
.community-orbit--center {
width:
52px !important;
height:
52px !important;
font-size:
15px !important;
}
.community-open {
width:
58px !important;
height:
58px !important;
}
/*
* Keywords: eine Zeile, so kompakt wie nötig.
*/
.community-card__keywords {
gap:
4px !important;
}
.community-card__keywords span {
min-height:
24px !important;
padding:
4px
6px !important;
font-size:
clamp(
8.5px,
2.45vw,
10px
) !important;
line-height:
1 !important;
letter-spacing:
-.01em !important;
}
.community-card__keywords--final
.community-card__arrow {
padding:
0
1px !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.community-card {
grid-template-columns:
34px
minmax(0, 1fr)
!important;
}
.community-cards__rail {
left:
15px !important;
}
.community-card__marker {
width:
27px !important;
height:
27px !important;
}
.community-card__box {
padding:
16px
11px
14px !important;
}
.community-card__visual {
height:
80px !important;
}
.community-card__keywords {
gap:
3px !important;
}
.community-card__keywords span {
padding:
3px
5px !important;
font-size:
8px !important;
}
}
/* =========================================================
COMMUNITY(S) · v98
Mobile: Überschrift vollständig + mehr Abstand Marker/Karte
========================================================= */
@media (max-width: 760px) {
/*
* Headerbereich bekommt etwas mehr oberen Raum,
* damit COMMUNITY(S) nicht unter der sticky Navigation
* angeschnitten wird.
*/
.community-cards__header {
position:
relative !important;
z-index:
2 !important;
padding-top:
18px !important;
overflow:
visible !important;
}
.community-cards__title.biconic-section-title {
display:
block !important;
width:
100% !important;
max-width:
100% !important;
margin:
0 !important;
padding:
0
0
4px
!important;
font-size:
clamp(
34px,
9.6vw,
44px
) !important;
line-height:
1.04 !important;
letter-spacing:
-.035em !important;
white-space:
normal !important;
overflow:
visible !important;
text-wrap:
balance;
}
.community-cards__title.biconic-section-title span {
display:
inline !important;
}
/*
* Die ganze Kartenachse etwas kompakter,
* damit links vom Kasten sichtbar Luft bleibt.
*/
.community-card {
grid-template-columns:
42px
minmax(0, 1fr)
!important;
column-gap:
8px !important;
width:
100% !important;
}
/*
* Karte selbst minimal schmaler.
* Dadurch entsteht optisch mehr Abstand zum Marker-Kreis.
*/
.community-card__box {
width:
calc(
100% - 6px
) !important;
justify-self:
end !important;
padding:
18px
13px
16px
!important;
}
.community-card__marker {
justify-self:
start !important;
margin-left:
0 !important;
}
/*
* Timeline exakt durch Markerzentrum führen.
*/
.community-cards__rail {
left:
15px !important;
}
/*
* Damit Grafik + Keywords trotz etwas schmalerer Karte
* sauber innerhalb des Kastens bleiben.
*/
.community-card__visual {
max-width:
100% !important;
}
.community-card__keywords {
width:
100% !important;
max-width:
100% !important;
justify-content:
flex-start !important;
overflow:
hidden !important;
}
.community-card__keywords span {
flex:
1 1 0 !important;
justify-content:
center !important;
padding-left:
4px !important;
padding-right:
4px !important;
font-size:
clamp(
7.8px,
2.25vw,
9.4px
) !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.community-cards__header {
padding-top:
14px !important;
}
.community-cards__title.biconic-section-title {
font-size:
clamp(
32px,
9vw,
39px
) !important;
}
.community-card {
grid-template-columns:
38px
minmax(0, 1fr)
!important;
column-gap:
7px !important;
}
.community-card__box {
width:
calc(
100% - 8px
) !important;
padding:
16px
10px
14px
!important;
}
.community-cards__rail {
left:
13px !important;
}
}
/* =========================================================
COMMUNITY(S) · v99
Klammer vollständig sichtbar + mehr Abstand Marker/Karte
========================================================= */
/*
* Die Klammer von COMMUNITY(S) darf auf KEINER Gerätegröße
* mehr an der rechten Kante abgeschnitten werden.
*/
.community-cards__header,
.community-cards__title,
.community-cards__title.biconic-section-title {
overflow:
visible !important;
max-width:
100% !important;
}
.community-cards__title.biconic-section-title {
display:
block !important;
width:
auto !important;
padding-right:
.18em !important;
box-sizing:
border-box !important;
white-space:
normal !important;
text-wrap:
balance;
}
/*
* Der farbige "(S)"-Teil bleibt inline und bekommt rechts
* eine kleine Sicherheitsreserve gegen Glyphen-Clipping.
*/
.community-cards__title.biconic-section-title > span {
display:
inline-block !important;
padding-right:
.08em !important;
overflow:
visible !important;
}
/* =========================================================
Mobile
========================================================= */
@media (max-width: 760px) {
/*
* Vom Nutzer gewünschte Kartenbreite.
* Dadurch bleibt links sichtbar mehr Raum zwischen Marker und Karte.
*/
.community-card__box {
width:
calc(
100% - 17px
) !important;
justify-self:
end !important;
}
/*
* Etwas mehr Abstand zwischen Marker-Spalte und Karte.
*/
.community-card {
grid-template-columns:
42px
minmax(0, 1fr)
!important;
column-gap:
10px !important;
}
.community-card__marker {
justify-self:
start !important;
margin-left:
0 !important;
}
/*
* Linie exakt durch die Marker-Mitte.
*/
.community-cards__rail {
left:
15px !important;
}
/*
* COMMUNITY(S) auf Mobile noch etwas kompakter,
* damit beide Klammern sauber sichtbar bleiben.
*/
.community-cards__title.biconic-section-title {
width:
100% !important;
padding-right:
.22em !important;
font-size:
clamp(
33px,
9.2vw,
42px
) !important;
line-height:
1.05 !important;
letter-spacing:
-.03em !important;
}
.community-cards__title.biconic-section-title > span {
padding-right:
.10em !important;
}
}
/* =========================================================
Sehr kleine Smartphones
========================================================= */
@media (max-width: 390px) {
.community-card {
grid-template-columns:
38px
minmax(0, 1fr)
!important;
column-gap:
9px !important;
}
.community-card__box {
width:
calc(
100% - 17px
) !important;
}
.community-cards__rail {
left:
13px !important;
}
.community-cards__title.biconic-section-title {
font-size:
clamp(
31px,
8.8vw,
38px
) !important;
padding-right:
.24em !important;
}
}
/* =========================================================
Tablet / Desktop title safety
========================================================= */
@media (min-width: 761px) {
.community-cards__title.biconic-section-title {
width:
fit-content !important;
max-width:
calc(
100% - 20px
) !important;
padding-right:
.16em !important;
}
}
/* =========================================================
SECTION 07 · SPRACHE · v100
========================================================= */
/* 01 BENENNEN / 02 ÖFFNEN nie unter sticky Navigation */
.biconic-language-lab {
--language-sticky-offset: 118px;
}
.language-lab__act {
scroll-margin-top:
calc(var(--language-sticky-offset) + 18px) !important;
}
/* Lose Wortwolke sicher weg */
.language-lab__wordfield,
.language-token {
display: none !important;
}
/* Abschluss "Sprache schafft Sichtbarkeit / SICHTBAR" weg */
.language-lab__final {
display: none !important;
}
/* Rewrite ohne Pfeile */
.language-rewrite__arrow {
display: none !important;
}
.language-rewrite {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 7px !important;
padding: 14px 0 !important;
border-bottom:
1px solid
color-mix(in srgb, var(--border-color) 80%, transparent) !important;
}
.language-rewrite__old {
margin: 0 !important;
color:
color-mix(in srgb, var(--text-muted) 68%, transparent) !important;
font-size: clamp(15px, 1.1vw, 18px) !important;
line-height: 1.22 !important;
text-decoration: line-through !important;
text-decoration-thickness: 1.5px !important;
text-decoration-color:
color-mix(in srgb, #b64d91 58%, transparent) !important;
}
.language-rewrite__new {
margin: 0 !important;
color: var(--primary-color) !important;
font-size: clamp(22px, 2vw, 32px) !important;
font-weight: 500 !important;
line-height: 1.16 !important;
}
@media (max-width: 760px) {
.biconic-language-lab {
--language-sticky-offset:
calc(var(--biconic-nav-top, 0px) + 82px);
}
/* Act bekommt oben echte Luft unter der Navigation */
.language-lab__act {
padding-top:
calc(var(--language-sticky-offset) + 18px) !important;
margin-top:
calc((var(--language-sticky-offset) + 18px) * -1) !important;
}
/* 01 / 02 und BENENNEN / ÖFFNEN deutlich prominenter */
.language-lab__margin {
position: relative !important;
inset: auto !important;
width: 100% !important;
margin: 0 0 18px !important;
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
transform: none !important;
}
.language-lab__margin-number {
font-size: clamp(28px, 8vw, 38px) !important;
font-weight: 600 !important;
line-height: .95 !important;
color: #944ba3 !important;
}
.language-lab__margin-word {
font-size: clamp(26px, 7.4vw, 36px) !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: .02em !important;
writing-mode: horizontal-tb !important;
transform: none !important;
color: var(--primary-color) !important;
}
.language-lab__act-grid {
display: block !important;
}
.language-lab__reading {
width: 100% !important;
max-width: none !important;
}
/* Rewrite als kompakte Vorher/Nachher-Blöcke ohne Pfeile */
.language-lab__rewrite {
margin-top: 24px !important;
}
.language-rewrite {
gap: 6px !important;
padding: 13px 0 14px !important;
}
.language-rewrite__old {
font-size: 14px !important;
}
.language-rewrite__new {
font-size: clamp(20px, 5.7vw, 25px) !important;
line-height: 1.14 !important;
}
/* Übergang VERENGEN / ÖFFNEN kompakter */
.language-lab__switch {
min-height: 0 !important;
padding: 28px 0 !important;
}
}
/* kleine Smartphones */
@media (max-width: 390px) {
.language-lab__margin-number {
font-size: 26px !important;
}
.language-lab__margin-word {
font-size: 29px !important;
}
}
/* =========================================================
SECTION 07 · SPRACHE · v101
Desktop sticky Kapitel + kompakte Rewrite-Paare
========================================================= */
/* =========================================================
Desktop: 01 BENENNEN / 02 ÖFFNEN sticky unter Navigation
========================================================= */
@media (min-width: 981px) {
/*
* Das Act-Grid bleibt normal im Dokumentfluss.
* Nur die linke Kapitelbezeichnung wird sticky.
*/
.language-lab__act-grid {
display:
grid !important;
grid-template-columns:
minmax(150px, 210px)
minmax(0, 1fr)
!important;
gap:
clamp(
34px,
4vw,
64px
) !important;
align-items:
start !important;
}
.language-lab__margin {
position:
sticky !important;
top:
calc(
var(--language-sticky-offset)
+ 18px
) !important;
align-self:
start !important;
width:
100% !important;
margin:
0 !important;
padding:
8px
0
0
!important;
transform:
none !important;
z-index:
2 !important;
}
.language-lab__margin-number {
display:
block !important;
margin:
0
0
8px
!important;
color:
#944ba3 !important;
font-size:
clamp(
28px,
2.2vw,
36px
) !important;
font-weight:
600 !important;
line-height:
1 !important;
}
.language-lab__margin-word {
display:
block !important;
writing-mode:
horizontal-tb !important;
transform:
none !important;
color:
var(--primary-color) !important;
font-size:
clamp(
28px,
2.4vw,
38px
) !important;
font-weight:
600 !important;
line-height:
1 !important;
letter-spacing:
-.02em !important;
}
.language-lab__reading {
min-width:
0 !important;
}
}
/* =========================================================
Rewrite-Paare kompakter
========================================================= */
.language-lab__rewrite {
display:
grid !important;
gap:
8px !important;
margin-top:
22px !important;
}
.language-rewrite {
display:
grid !important;
grid-template-columns:
minmax(0, .92fr)
minmax(0, 1.08fr)
!important;
gap:
clamp(
14px,
1.8vw,
24px
) !important;
align-items:
center !important;
padding:
11px
0 !important;
border-bottom:
1px solid
color-mix(
in srgb,
var(--border-color) 78%,
transparent
) !important;
}
.language-rewrite__old {
margin:
0 !important;
color:
color-mix(
in srgb,
var(--text-muted) 72%,
transparent
) !important;
font-size:
clamp(
13px,
.95vw,
16px
) !important;
line-height:
1.2 !important;
text-decoration:
line-through !important;
text-decoration-thickness:
1.2px !important;
}
.language-rewrite__new {
margin:
0 !important;
color:
var(--primary-color) !important;
font-size:
clamp(
16px,
1.25vw,
20px
) !important;
font-weight:
500 !important;
line-height:
1.22 !important;
}
/* =========================================================
Tablet
========================================================= */
@media (min-width: 761px) and (max-width: 980px) {
.language-rewrite {
grid-template-columns:
minmax(0, .9fr)
minmax(0, 1.1fr)
!important;
gap:
14px !important;
padding:
10px
0 !important;
}
.language-rewrite__old {
font-size:
13px !important;
}
.language-rewrite__new {
font-size:
17px !important;
}
}
/* =========================================================
Mobile: kompakt, ohne Pfeil, weiterhin untereinander
========================================================= */
@media (max-width: 760px) {
.language-lab__rewrite {
gap:
6px !important;
margin-top:
18px !important;
}
.language-rewrite {
grid-template-columns:
1fr !important;
gap:
4px !important;
padding:
10px
0
11px
!important;
}
.language-rewrite__old {
font-size:
12.5px !important;
line-height:
1.18 !important;
}
.language-rewrite__new {
font-size:
clamp(
17px,
4.8vw,
21px
) !important;
line-height:
1.15 !important;
}
}
/* =========================================================
SECTION 08 · GESUNDHEIT · v102
Bi+ Compass kompakter / Boxen größer & näher
========================================================= */
/*
* Gesamte Grafik kompakter, damit die vier Themen stärker
* als zusammengehöriges System wirken.
*/
.biconic-health__compass,
.health-compass {
position:
relative !important;
width:
min(
760px,
100%
) !important;
min-height:
520px !important;
margin:
clamp(32px, 4vw, 54px)
auto
clamp(34px, 4vw, 54px)
!important;
}
/*
* Zentrales BI+ etwas präsenter.
*/
.health-compass__center,
.biconic-health__compass-center {
transform:
translate(-50%, -50%)
scale(1.08) !important;
z-index:
3 !important;
}
/*
* Themenboxen größer, stärker und näher an die Mitte.
*/
.health-compass__node,
.biconic-health__compass-node {
min-width:
150px !important;
min-height:
46px !important;
padding:
10px
16px !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
1px solid
color-mix(
in srgb,
#9a4baa 22%,
var(--border-color)
) !important;
border-radius:
999px !important;
background:
color-mix(
in srgb,
var(--card-bg) 94%,
#f4eafa
) !important;
box-shadow:
0 8px 24px
rgba(88, 47, 116, .07)
!important;
color:
var(--text-main) !important;
font-size:
clamp(
13px,
1vw,
16px
) !important;
font-weight:
600 !important;
letter-spacing:
.08em !important;
white-space:
nowrap !important;
z-index:
4 !important;
}
/*
* Desktop: alle vier deutlich näher an den Mittelpunkt.
* Die Klassennamen werden zusätzlich über nth-child abgesichert,
* falls die vorhandenen Nodes keine Positionsmodifier haben.
*/
.health-compass__node--psyche,
.biconic-health__compass-node--psyche {
left:
8% !important;
top:
28% !important;
}
.health-compass__node--sexual,
.health-compass__node--sexual-health,
.biconic-health__compass-node--sexual {
right:
8% !important;
top:
28% !important;
}
.health-compass__node--advice,
.health-compass__node--beratung,
.biconic-health__compass-node--advice {
left:
9% !important;
bottom:
24% !important;
}
.health-compass__node--allyship,
.biconic-health__compass-node--allyship {
right:
9% !important;
bottom:
24% !important;
}
/*
* Linien etwas kräftiger sichtbar.
*/
.health-compass__line,
.biconic-health__compass-line,
.health-compass::before,
.health-compass::after {
opacity:
.58 !important;
}
/* =========================================================
Mobile
========================================================= */
@media (max-width: 760px) {
.biconic-health__compass,
.health-compass {
width:
100% !important;
min-height:
410px !important;
margin:
24px
auto
30px
!important;
}
/*
* Auf Mobile deutlich näher an BI+.
* Dadurch verschwindet der große leere Raum.
*/
.health-compass__node,
.biconic-health__compass-node {
min-width:
124px !important;
min-height:
42px !important;
padding:
8px
12px !important;
font-size:
clamp(
11px,
3vw,
13px
) !important;
letter-spacing:
.055em !important;
box-shadow:
0 7px 18px
rgba(88, 47, 116, .08)
!important;
}
.health-compass__node--psyche,
.biconic-health__compass-node--psyche {
left:
2% !important;
top:
20% !important;
}
.health-compass__node--sexual,
.health-compass__node--sexual-health,
.biconic-health__compass-node--sexual {
right:
2% !important;
top:
20% !important;
}
.health-compass__node--advice,
.health-compass__node--beratung,
.biconic-health__compass-node--advice {
left:
2% !important;
bottom:
16% !important;
}
.health-compass__node--allyship,
.biconic-health__compass-node--allyship {
right:
2% !important;
bottom:
16% !important;
}
.health-compass__center,
.biconic-health__compass-center {
transform:
translate(-50%, -50%)
scale(.98) !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.biconic-health__compass,
.health-compass {
min-height:
380px !important;
}
.health-compass__node,
.biconic-health__compass-node {
min-width:
112px !important;
min-height:
38px !important;
padding:
7px
9px !important;
font-size:
10.5px !important;
}
}
/* =========================================================
SECTION 08 · GESUNDHEIT · v103
BI+ Core exakt zwischen den vier Boxen zentriert
========================================================= */
/*
* Compass als echte Positionsfläche behandeln.
* Der BI+ Kern sitzt exakt im geometrischen Mittelpunkt.
*/
.health-compass {
position:
relative !important;
display:
block !important;
}
.health-compass__core {
position:
absolute !important;
left:
50% !important;
top:
50% !important;
transform:
translate(-50%, -50%)
!important;
margin:
0 !important;
z-index:
3 !important;
}
/*
* Achsen ebenfalls exakt vom Mittelpunkt aus zeichnen.
*/
.health-compass__axes {
position:
absolute !important;
inset:
0 !important;
z-index:
1 !important;
}
/* =========================================================
Desktop / Tablet
Vier Boxen symmetrisch um den Mittelpunkt
========================================================= */
@media (min-width: 761px) {
.health-compass__node--1 {
left:
5% !important;
top:
24% !important;
}
.health-compass__node--2 {
right:
5% !important;
top:
24% !important;
}
.health-compass__node--3 {
left:
5% !important;
bottom:
24% !important;
}
.health-compass__node--4 {
right:
5% !important;
bottom:
24% !important;
}
}
/* =========================================================
Mobile
BI+ Kern mittig zwischen oberen und unteren Boxen
========================================================= */
@media (max-width: 760px) {
.health-compass {
min-height:
390px !important;
}
.health-compass__core {
left:
50% !important;
top:
50% !important;
transform:
translate(-50%, -50%)
!important;
}
.health-compass__node--1 {
left:
0 !important;
top:
20% !important;
}
.health-compass__node--2 {
right:
0 !important;
top:
20% !important;
}
.health-compass__node--3 {
left:
0 !important;
bottom:
20% !important;
}
.health-compass__node--4 {
right:
0 !important;
bottom:
20% !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.health-compass {
min-height:
360px !important;
}
.health-compass__node--1,
.health-compass__node--2 {
top:
19% !important;
}
.health-compass__node--3,
.health-compass__node--4 {
bottom:
19% !important;
}
}
/* =========================================================
SECTION 08 · GESUNDHEIT · v104
Schritt-Grafiken + Abschluss entfernt
========================================================= */
/*
* Die dekorativen Elemente unter den Abschnitten 01–04
* werden nicht mehr dargestellt.
*/
.health-step__signal,
.health-tags,
.health-access,
.health-ally {
display:
none !important;
}
/*
* Abschlussblock komplett entfernt.
*/
.health-final {
display:
none !important;
}
/*
* Da unter den Texten keine Grafiken mehr folgen,
* die Abschnitte etwas kompakter abschließen.
*/
.health-step__text:last-child {
margin-bottom:
0 !important;
}
.health-step__content {
padding-bottom:
0 !important;
}
@media (max-width: 760px) {
.health-pathway {
gap:
34px !important;
}
.health-step__heading {
margin-bottom:
12px !important;
}
.health-step__text + .health-step__text {
margin-top:
14px !important;
}
}
/* =========================================================
HEADER INTERACTION HINT · v105
Klick-/Tap-Funktion sichtbar machen, ohne Header zu überladen
========================================================= */
/* Alle interaktiven Knoten zeigen auf Desktop klar Interaktivität */
.mesh-person,
.mesh-flag {
cursor:
pointer !important;
-webkit-tap-highlight-color:
transparent;
}
/* Hint direkt unter dem Claim */
.biconic-mesh__interaction-hint {
position:
relative;
z-index:
8;
display:
inline-flex;
align-items:
center;
justify-content:
center;
gap:
8px;
max-width:
min(
92vw,
430px
);
margin-top:
clamp(
13px,
1.6vw,
20px
);
padding:
7px
12px;
border:
1px solid
rgba(255,255,255,.16);
border-radius:
999px;
background:
rgba(7,5,19,.36);
color:
rgba(255,255,255,.82);
font-size:
clamp(
11px,
.9vw,
14px
);
font-weight:
400;
line-height:
1.2;
letter-spacing:
.02em;
opacity:
0;
transform:
translateY(5px);
pointer-events:
none;
transition:
opacity .42s ease,
transform .42s ease;
}
.biconic-mesh__interaction-hint.is-visible {
opacity:
1;
transform:
translateY(0);
}
.biconic-mesh__interaction-hint.is-dismissed {
opacity:
0 !important;
transform:
translateY(4px) !important;
}
.biconic-mesh__interaction-hint-dot {
position:
relative;
flex:
0 0 auto;
width:
7px;
height:
7px;
border-radius:
50%;
background:
#e30072;
box-shadow:
0 0 0 0
rgba(227,0,114,.42);
animation:
biconicHintDot
2.4s
ease-out
infinite;
}
@keyframes biconicHintDot {
0%,
52%,
100% {
box-shadow:
0 0 0 0
rgba(227,0,114,0);
}
65% {
box-shadow:
0 0 0 7px
rgba(227,0,114,.14);
}
}
/* ---------------------------------------------------------
Nacheinander aufleuchtende Icons
JS setzt die Klasse nur jeweils auf EIN Element.
--------------------------------------------------------- */
.mesh-person.is-interaction-hint-target,
.mesh-flag.is-interaction-hint-target {
z-index:
12 !important;
}
.mesh-person.is-interaction-hint-target
.mesh-person__halo {
opacity:
.95 !important;
transform:
scale(1.20) !important;
border-color:
rgba(223,0,113,.66) !important;
box-shadow:
0 0 0 5px rgba(223,0,113,.10),
0 0 24px rgba(177,67,217,.30) !important;
}
.mesh-flag.is-interaction-hint-target
.mesh-flag__ring {
opacity:
.95 !important;
transform:
scale(1.16) !important;
box-shadow:
0 0 0 5px rgba(75,89,224,.11),
0 0 24px rgba(223,0,113,.24) !important;
}
.mesh-person.is-interaction-hint-target img,
.mesh-flag.is-interaction-hint-target img {
transform:
scale(1.07) !important;
filter:
brightness(1.13)
drop-shadow(
0 0 9px
rgba(255,255,255,.18)
) !important;
}
/* Desktop Hover bleibt die primäre Interaktionsanzeige */
@media (hover: hover) and (pointer: fine) {
.mesh-person:hover,
.mesh-flag:hover {
cursor:
pointer !important;
}
}
/* Mobile: Hint deutlicher, aber bewusst klein */
@media (max-width: 760px) {
.biconic-mesh__interaction-hint {
max-width:
min(
calc(100vw - 48px),
340px
);
margin-top:
14px;
padding:
7px
11px;
gap:
7px;
font-size:
11px;
line-height:
1.22;
background:
rgba(8,5,21,.48);
border-color:
rgba(255,255,255,.20);
}
}
/* Reduced Motion: keine Pulse, Hint bleibt statisch */
@media (prefers-reduced-motion: reduce) {
.biconic-mesh__interaction-hint-dot {
animation:
none !important;
box-shadow:
none !important;
}
.mesh-person.is-interaction-hint-target
.mesh-person__halo,
.mesh-flag.is-interaction-hint-target
.mesh-flag__ring,
.mesh-person.is-interaction-hint-target img,
.mesh-flag.is-interaction-hint-target img {
transition:
none !important;
}
}
/* =========================================================
SECTION 01 · BI+ · v107
Überschrift mit Plus_7 links, bestehendes Layout bleibt erhalten
========================================================= */
.biconic-info__heading-row {
display:
grid;
grid-template-columns:
clamp(72px, 8vw, 108px)
minmax(0, 1fr);
gap:
clamp(
18px,
2.4vw,
34px
);
align-items:
center;
width:
100%;
margin-bottom:
clamp(
24px,
2.8vw,
36px
);
}
.biconic-info__heading-icon {
width:
100%;
aspect-ratio:
1;
display:
grid;
place-items:
center;
}
.biconic-info__heading-icon img {
display:
block;
width:
100%;
height:
100%;
object-fit:
contain;
filter:
drop-shadow(
0 10px 20px
rgba(73, 35, 111, .12)
);
}
.biconic-info__heading-copy {
min-width:
0;
width:
100%;
}
.biconic-info__heading-copy
.biconic-section-kicker {
margin-bottom:
12px !important;
}
.biconic-info__heading-copy
.biconic-section-title {
width:
100% !important;
max-width:
780px !important;
margin:
0 !important;
}
/* Tablet */
@media (max-width: 980px) {
.biconic-info__heading-row {
grid-template-columns:
clamp(62px, 8vw, 82px)
minmax(0, 1fr);
gap:
18px;
}
}
/* Mobile */
@media (max-width: 760px) {
.biconic-info__heading-row {
grid-template-columns:
58px
minmax(0, 1fr);
gap:
14px;
align-items:
center;
margin-bottom:
22px;
}
.biconic-info__heading-copy
.biconic-section-kicker {
margin-bottom:
7px !important;
font-size:
10px !important;
}
.biconic-info__heading-copy
.biconic-section-title {
font-size:
clamp(
30px,
8.4vw,
42px
) !important;
line-height:
1 !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.biconic-info__heading-row {
grid-template-columns:
50px
minmax(0, 1fr);
gap:
12px;
}
}
/* =========================================================
ALLE KAPITELÜBERSCHRIFTEN + PLUS · v108
Einheitlicher Aufbau wie Sektion 1
========================================================= */
.biconic-section-heading-row {
display:
grid;
grid-template-columns:
clamp(72px, 8vw, 108px)
minmax(0, 1fr);
gap:
clamp(
18px,
2.4vw,
34px
);
align-items:
center;
width:
100%;
margin-bottom:
clamp(
24px,
2.8vw,
36px
);
}
.biconic-section-heading-icon {
width:
100%;
aspect-ratio:
1;
display:
grid;
place-items:
center;
pointer-events:
none;
}
.biconic-section-heading-icon img {
display:
block;
width:
100%;
height:
100%;
object-fit:
contain;
filter:
drop-shadow(
0 10px 20px
rgba(73, 35, 111, .12)
);
}
.biconic-section-heading-copy {
min-width:
0;
width:
100%;
}
.biconic-section-heading-copy
.biconic-section-kicker {
margin-bottom:
12px !important;
}
.biconic-section-heading-copy
.biconic-section-title {
width:
100% !important;
max-width:
980px !important;
margin:
0 !important;
}
/*
* Frühere Sonderpositionierungen bei Community / Sprache /
* Gesundheit / FAQ neutralisieren, weil sie nun innerhalb
* der gemeinsamen Überschriftszeile liegen.
*/
.biconic-section-heading-copy
.community-cards__index,
.biconic-section-heading-copy
.language-lab__index,
.biconic-section-heading-copy
.biconic-health__index,
.biconic-section-heading-copy
.biconic-faq__index {
position:
static !important;
inset:
auto !important;
width:
auto !important;
height:
auto !important;
transform:
none !important;
opacity:
1 !important;
writing-mode:
horizontal-tb !important;
}
/* =========================================================
Tablet
========================================================= */
@media (max-width: 980px) {
.biconic-section-heading-row {
grid-template-columns:
clamp(62px, 8vw, 82px)
minmax(0, 1fr);
gap:
18px;
}
}
/* =========================================================
Mobile
========================================================= */
@media (max-width: 760px) {
.biconic-section-heading-row {
grid-template-columns:
58px
minmax(0, 1fr);
gap:
14px;
align-items:
center;
margin-bottom:
22px;
}
.biconic-section-heading-copy
.biconic-section-kicker {
margin-bottom:
7px !important;
font-size:
10px !important;
}
.biconic-section-heading-copy
.biconic-section-title {
font-size:
clamp(
30px,
8.4vw,
42px
) !important;
line-height:
1 !important;
letter-spacing:
-.035em !important;
}
}
/* Sehr kleine Smartphones */
@media (max-width: 390px) {
.biconic-section-heading-row {
grid-template-columns:
50px
minmax(0, 1fr);
gap:
12px;
}
}