Zurück: das "splits--framed" wieder entfernen
----------------------------------------------------------- */
.splits--framed { gap: 48px; }
.splits--framed .split {
gap: 0;
align-items: stretch;
border-radius: var(--radius-card-lg);
overflow: hidden;
background:
linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 100%),
var(--glass-base);
-webkit-backdrop-filter: var(--blur-card);
backdrop-filter: var(--blur-card);
border: 1px solid var(--glass-border);
box-shadow:
0 34px 80px -30px rgba(20,41,70,0.30),
inset 0 1px 0 rgba(255,255,255,0.7);
}
.splits--framed .split__text {
max-width: none;
padding: clamp(34px, 4vw, 64px);
display: flex;
flex-direction: column;
justify-content: center;
}
.splits--framed .split__media {
aspect-ratio: auto;
min-height: 100%;
border: none;
border-radius: 0;
box-shadow: none;
background: none;
display: block;
}
.splits--framed .split__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Nahtloser Verlauf von der Textseite auf das Bild */
.splits--framed .split__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
/* Bild rechts (Standardblock): Verlauf von links ins Bild */
.splits--framed .split .split__media::after {
background: linear-gradient(90deg,
rgba(248,249,251,1) 0%,
rgba(248,249,251,0.72) 14%,
rgba(248,249,251,0) 44%);
}
/* Bild links (reverse): Verlauf von rechts ins Bild */
.splits--framed .split--reverse .split__media::after {
background: linear-gradient(270deg,
rgba(248,249,251,1) 0%,
rgba(248,249,251,0.72) 14%,
rgba(248,249,251,0) 44%);
}
@media (max-width: 900px) {
.splits--framed .split { grid-template-columns: 1fr; }
.splits--framed .split__media { min-height: 240px; }
.splits--framed .split .split__media::after,
.splits--framed .split--reverse .split__media::after {
background: linear-gradient(0deg,
rgba(248,249,251,1) 0%,
rgba(248,249,251,0) 36%);
}
}
/* ===== Mock — App (Block 1 — Übungssystem) ===== */
.mock {
position: relative;
width: 80%;
aspect-ratio: 4 / 3;
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%),
rgba(6, 14, 24, 0.92);
border: 1px solid rgba(255,255,255,0.07);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 24px 48px -12px rgba(0,0,0,0.55),
0 6px 12px rgba(0,0,0,0.30);
overflow: hidden;
font-size: 11px;
}
.mock--app {
display: grid;
grid-template-columns: 80px 1fr;
grid-template-rows: 28px 1fr;
}
.mock__chrome {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 10px;
padding: 0 12px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.025);
font-size: 10px;
color: var(--text-quiet);
}
.mock__dots { display: flex; gap: 5px; }
.mock__dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.10); }
.mock__dots span:first-child { background: rgba(255,90,90,0.55); }
.mock__dots span:nth-child(2) { background: rgba(255,200,60,0.55); }
.mock__dots span:nth-child(3) { background: rgba(95,224,140,0.55); }
.mock__url {
flex: 1;
text-align: center;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: 9.5px;
letter-spacing: 0.02em;
color: var(--text-quiet);
background: rgba(0,0,0,0.30);
border-radius: 4px;
padding: 3px 8px;
border: 1px solid rgba(255,255,255,0.04);
}
.mock__sidebar {
padding: 14px 8px;
border-right: 1px solid rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
gap: 6px;
background: rgba(0,0,0,0.15);
}
.mock__nav-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
font-size: 10px;
color: var(--text-quiet);
font-weight: 500;
}
.mock__nav-item.is-active {
color: var(--text);
background: rgba(43,182,201,0.10);
border: 1px solid rgba(43,182,201,0.30);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.mock__nav-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.20); }
.mock__nav-item.is-active .mock__nav-dot { background: var(--accent-bright); box-shadow: 0 0 6px var(--accent-halo); }
.mock__main {
padding: 14px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
align-content: start;
}
.mock__tile {
position: relative;
padding: 10px 12px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
display: flex;
flex-direction: column;
gap: 6px;
min-height: 70px;
}
.mock__tile--accent {
background:
linear-gradient(180deg, rgba(43,182,201,0.18) 0%, rgba(43,182,201,0.04) 100%);
border-color: rgba(43,182,201,0.30);
}
.mock__tile-label { font-size: 8.5px; color: var(--text-quiet); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.mock__tile-value { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.mock__sparkline {
height: 16px;
margin-top: auto;
background:
linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.10) 60%, rgba(255,255,255,0.04) 100%);
clip-path: polygon(0 80%, 10% 60%, 25% 70%, 40% 35%, 55% 55%, 70% 25%, 85% 45%, 100% 20%, 100% 100%, 0 100%);
}
.mock__sparkline--accent {
background:
linear-gradient(90deg, rgba(95,224,240,0.45) 0%, rgba(43,182,201,0.55) 60%, rgba(95,224,240,0.30) 100%);
}
.mock__caret {
position: absolute;
width: 11px; height: 16px;
left: 56%;
top: 64%;
background: var(--accent-bright);
border-radius: 1.5px;
box-shadow: 0 0 10px var(--accent-halo);
animation: caret 1.1s ease-in-out infinite;
}
@keyframes caret { 50% { opacity: 0; } }
/* ===== Mock — People (Block 2 — Trainer Netzwerk) ===== */
.mock--people {
width: 84%;
aspect-ratio: 7/5;
position: relative;
background:
radial-gradient(40% 40% at 50% 50%, rgba(43,182,201,0.12) 0%, rgba(3,7,15,0) 70%),
linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%),
rgba(6, 14, 24, 0.85);
}
.mock--people .mock__edges {
position: absolute;
inset: 0;
width: 100%; height: 100%;
stroke: rgba(43,182,201,0.25);
stroke-width: 1;
stroke-dasharray: 4 4;
fill: none;
}
.mock__node {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
z-index: 2;
}
.mock__avatar {
width: 38px; height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text);
background:
linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 100%),
rgba(28,46,70,0.85);
border: 1px solid rgba(255,255,255,0.10);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 6px 16px -6px rgba(0,0,0,0.5);
}
.mock__avatar--lg {
width: 56px; height: 56px;
font-size: 14px;
background:
linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 60%),
linear-gradient(140deg, var(--accent-bright) 0%, var(--accent) 55%, var(--accent-deep) 100%);
color: #03161E;
border-color: rgba(43,182,201,0.50);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
0 0 0 1px rgba(43,182,201,0.30),
0 12px 28px -8px rgba(43,182,201,0.55);
}
.mock__node-label {
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-quiet);
}
.mock__node--center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mock__node--tl { left: 12%; top: 18%; }
.mock__node--tr { right: 12%; top: 18%; }
.mock__node--bl { left: 12%; bottom: 14%; }
.mock__node--br { right: 12%; bottom: 14%; }
/* ===== Mock — Roadmap (Block 3 — Zugeschnitten) ===== */
.mock--roadmap {
width: 86%;
aspect-ratio: 7/5;
padding: 18px 16px 14px;
display: flex;
flex-direction: column;
gap: 8px;
background: rgba(6, 14, 24, 0.92);
}
.mock__lane {
display: grid;
grid-template-columns: 90px 1fr;
gap: 10px;
align-items: center;
}
.mock__lane-label {
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-quiet);
}
.mock__bar {
position: relative;
height: 18px;
border-radius: 6px;
background:
linear-gradient(180deg, rgba(43,182,201,0.30) 0%, rgba(43,182,201,0.10) 100%);
border: 1px solid rgba(43,182,201,0.30);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.mock__bar-label {
position: absolute;
left: 8px; top: 50%;
transform: translateY(-50%);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text);
}
.mock__bar--1 { width: 22%; }
.mock__bar--2 { width: 38%; margin-left: 14%; }
.mock__bar--3 { width: 28%; margin-left: 42%; }
.mock__bar--4 { width: 18%; margin-left: 70%;
background:
linear-gradient(180deg, rgba(95,224,240,0.50) 0%, rgba(43,182,201,0.20) 100%);
border-color: rgba(95,224,240,0.50);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 0 16px rgba(95,224,240,0.30);
}
.mock__timeline {
display: grid;
grid-template-columns: 90px repeat(4, 1fr);
margin-top: 4px;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--text-quiet);
padding-top: 8px;
border-top: 1px dashed rgba(255,255,255,0.08);
}
.mock__timeline span { padding: 4px 0; }
.mock__timeline span:first-child { content: ""; }
.mock__golive {
position: absolute;
left: 78%;
top: 12%;
bottom: 12%;
width: 1.5px;
background: linear-gradient(180deg, rgba(95,224,240,0) 0%, rgba(95,224,240,0.70) 50%, rgba(95,224,240,0) 100%);
box-shadow: 0 0 12px rgba(95,224,240,0.50);
}
/* -----------------------------------------------------------
Process steps
----------------------------------------------------------- */
.steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step {
position: relative;
padding: 32px 28px;
border-radius: var(--radius-card);
background:
linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%),
var(--glass-base);
-webkit-backdrop-filter: var(--blur-card);
backdrop-filter: var(--blur-card);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-card), var(--shadow-inset-card);
transition: border-color .25s var(--reveal-ease);
}
.step:hover { border-color: rgba(255,255,255,0.12); }
.step__num {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--accent-bright);
margin-bottom: 16px;
text-transform: uppercase;
}
.step__num::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent-halo);
}
.step__title {
margin: 0 0 12px;
font-size: 19px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.02em;
}
.step__divider {
height: 1px;
width: 56px;
background: linear-gradient(90deg, rgba(43,182,201,0.55) 0%, rgba(43,182,201,0) 100%);
margin: 0 0 18px;
}
.step__body { margin: 0; font-size: 15px; color: var(--text-body); line-height: 1.6; }
/* -----------------------------------------------------------
About (Martin)
----------------------------------------------------------- */
.about {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 80px;
align-items: stretch;
}
@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 36px; align-items: center; } }
.about__media {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-card-lg);
overflow: hidden;
background:
radial-gradient(70% 50% at 50% 0%, rgba(43,182,201,0.32) 0%, rgba(3,7,15,0) 65%),
linear-gradient(160deg, rgba(28,46,70,0.65) 0%, rgba(8,16,28,0.95) 100%);
border: 1px solid var(--glass-border);
box-shadow:
0 30px 80px -24px rgba(0,0,0,0.75),
inset 0 1px 0 rgba(255,255,255,0.10),
inset 0 -1px 0 rgba(0,0,0,0.40);
display: flex;
align-items: flex-end;
justify-content: center;
isolation: isolate;
}
.about__media::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--noise);
opacity: 0.05;
mix-blend-mode: overlay;
}
.about__media::after {
content: "Foto Martin Trosits — Platzhalter";
position: absolute;
bottom: 22px;
left: 22px;
right: 22px;
font-size: 11px;
color: var(--text-quiet);
letter-spacing: 0.10em;
text-transform: uppercase;
text-align: center;
}
.about__silhouette {
width: 60%;
aspect-ratio: 1 / 1.4;
border-radius: 140px 140px 32px 32px;
background:
radial-gradient(60% 30% at 50% 10%, rgba(43,182,201,0.32) 0%, rgba(3,7,15,0) 60%),
linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.06);
margin-bottom: 56px;
}
.about__text { max-width: 600px; }
.about__text .eyebrow { margin-bottom: 28px; }
.about__text .h2 {
font-size: clamp(46px, 6vw, 78px);
line-height: 1.1;
}
.about__text .body {
margin-top: 30px;
font-size: 16.5px;
color: var(--text-body);
line-height: 1.7;
}
.about__text .body strong { font-weight: 700; color: var(--navy); }
/* -----------------------------------------------------------
FAQ
----------------------------------------------------------- */
.faq-list {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.faq__item {
position: relative;
border-radius: 12px;
background: var(--glass-base);
-webkit-backdrop-filter: var(--blur-card);
backdrop-filter: var(--blur-card);
border: 1px solid var(--glass-border);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 1px 2px rgba(0,0,0,0.30);
overflow: hidden;
transition: border-color .25s var(--reveal-ease);
}
.faq__item[open] { border-color: rgba(255,255,255,0.14); }
.faq__summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 22px;
cursor: pointer;
color: var(--text);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.015em;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__chevron {
flex: 0 0 auto;
width: 16px; height: 16px;
color: var(--accent-bright);
transition: transform .4s var(--reveal-ease);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__answer {
padding: 0 22px 22px;
font-size: 15px;
color: var(--text-body);
line-height: 1.65;
max-width: 720px;
}
.faq__answer p { margin: 0; }
/* -----------------------------------------------------------
CTA + Form
----------------------------------------------------------- */
.cta {
position: relative;
max-width: 960px;
margin: 0 auto;
padding: 64px;
border-radius: var(--radius-card-lg);
background:
linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%),
var(--glass-strong);
-webkit-backdrop-filter: var(--blur-card);
backdrop-filter: var(--blur-card);
border: 1px solid var(--glass-border);
box-shadow:
0 24px 64px -24px rgba(0,0,0,0.65),
inset 0 1px 0 rgba(255,255,255,0.06);
text-align: left;
overflow: hidden;
}
@media (max-width: 700px) { .cta { padding: 36px 24px; } }
.cta__head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.cta__head .h2 { font-size: clamp(42px, 5.6vw, 72px); margin: 0; }
.cta__head .lead { margin-top: 24px; }
.form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.form .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form { grid-template-columns: 1fr; } }
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field > label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-caption);
}
.input, .textarea, .select {
width: 100%;
height: 48px;
padding: 0 16px;
font: 400 15px/1.5 "Switzer", sans-serif;
color: var(--text);
background:
linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%),
rgba(3, 8, 16, 0.55);
border: 1px solid var(--glass-border);
border-radius: var(--radius-input);
outline: none;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
inset 0 -1px 0 rgba(0,0,0,0.40);
transition: border-color .25s var(--reveal-ease), box-shadow .25s var(--reveal-ease);
}
.textarea { height: auto; padding: 14px 16px; min-height: 130px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
border-color: rgba(43,182,201,0.45);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
inset 0 -1px 0 rgba(0,0,0,0.40),
0 0 0 4px rgba(43,182,201,0.12);
}
.input::placeholder, .textarea::placeholder { color: var(--text-quiet); }
.consent {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 13px;
color: var(--text-body);
line-height: 1.5;
margin-top: 8px;
}
.consent input[type="checkbox"] {
flex: 0 0 auto;
width: 18px; height: 18px;
margin-top: 2px;
accent-color: var(--accent);
}
.form__actions {
margin-top: 8px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px;
}
.form__actions .btn { width: 100%; }
@media (min-width: 700px) {
.form__actions { justify-content: flex-end; }
.form__actions .btn { width: auto; min-width: 220px; }
}
.honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__status {
margin-top: 14px;
font-size: 14px;
color: var(--text-caption);
}
.form__status.is-error { color: #FF7080; }
.form__status.is-success { color: var(--accent-bright); }
/* -----------------------------------------------------------
Footer
----------------------------------------------------------- */
.footer {
position: relative;
padding: 80px 40px 40px;
background: var(--bg-deep);
border-top: 1px solid rgba(255,255,255,0.04);
}
.footer::before {
content: "";
position: absolute;
top: -1px; left: 0; right: 0;
height: 1px;
background: radial-gradient(60% 100% at 50% 50%, rgba(43,182,201,0.45) 0%, rgba(43,182,201,0) 100%);
pointer-events: none;
}
.footer__inner {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 64px;
}
@media (max-width: 900px) {
.footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
.footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.footer__inner { grid-template-columns: 1fr; }
.footer__brand-col { grid-column: auto; }
}
.footer__brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--text);
font-weight: 700;
letter-spacing: 0.14em;
font-size: 13px;
text-transform: uppercase;
}
.footer__desc {
margin: 20px 0 0;
max-width: 360px;
font-size: 14px;
color: var(--text-body);
line-height: 1.65;
}
.footer__contact {
margin: 20px 0 0;
font-size: 14px;
color: var(--text-caption);
}
.footer__contact a { color: var(--accent-bright); }
.footer__col-title {
font-size: 12px;
font-weight: 600;
color: var(--text);
margin: 0 0 16px;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.footer__col ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 12px;
}
.footer__col a {
font-size: 14px;
color: var(--text-body);
letter-spacing: -0.005em;
}
.footer__col a:hover { color: var(--text); }
.footer__bar {
max-width: var(--container-max);
margin: 64px auto 0;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.04);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12.5px;
color: var(--text-quiet);
flex-wrap: wrap;
gap: 12px;
}
/* -----------------------------------------------------------
Reveal-on-scroll
----------------------------------------------------------- */
/* Reveal-/Lade-Animationen laufen ueber GSAP (app.js).
Ziele werden nur versteckt, wenn JS + Motion aktiv sind (html.ganim). */
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation-duration: 120s; }
}
/* -----------------------------------------------------------
Ausgangslage-Karten: Hover hebt leicht an + umlaufender
Leucht-Rand (gleiche Conic-Technik wie die Modell-Karten)
----------------------------------------------------------- */
#problem .card { position: relative; }
#problem .card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.5px;
background: conic-gradient(
from var(--shine-angle),
rgba(31,169,185,0) 0deg,
rgba(31,169,185,0) 262deg,
rgba(150,190,235,0.65) 306deg,
rgba(56,195,211,0.95) 330deg,
rgba(140,216,196,0.7) 348deg,
rgba(31,169,185,0) 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0;
z-index: 2;
transition: opacity .45s var(--reveal-ease);
}
#problem .card:hover::before {
opacity: 1;
animation: shine-rotate 6s linear infinite;
}
#problem .card:hover {
transform: translateY(-6px);
box-shadow:
0 30px 60px -24px rgba(20,41,70,0.26),
0 0 0 1px rgba(31,169,185,0.10),
0 0 42px -6px rgba(43,182,201,0.38);
}
/* -----------------------------------------------------------
Über-uns-Headline etwas groesser
----------------------------------------------------------- */
#ueber-headline { font-size: clamp(40px, 5vw, 64px); }
/* -----------------------------------------------------------
GSAP-Reveals: Hintergrund zoomt sanft rein (reine CSS),
alle anderen Ziele bleiben versteckt bis GSAP sie einblendet.
Greift nur bei aktivem JS + erlaubter Bewegung (html.ganim).
----------------------------------------------------------- */
@keyframes hero-bg-in {
from { opacity: 0; scale: 1; }
to { opacity: 0.88; scale: 1.06; }
}
html.ganim .hero__bg { opacity: 0; animation: hero-bg-in 2.6s var(--reveal-ease) forwards; }
html.ganim .hero__text,
html.ganim .hero__form .msf,
html.ganim .logowall__heading,
html.ganim .marquee,
html.ganim #modell .section-head,
html.ganim #modell .split__text,
html.ganim #modell .split__media,
html.ganim #angebot .section-head,
html.ganim #angebot .ocard,
html.ganim #angebot .consulting,
html.ganim #ueber-uns .about__media,
html.ganim #ueber-uns .about__text,
html.ganim .tpage-top .section-head,
html.ganim .tcase,
html.ganim .cticker,
html.ganim .finalcta__title,
html.ganim .finalcta__sub,
html.ganim .finalcta__actions,
html.ganim .finalcta__note { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
#problem .card::before { animation: none !important; }
#problem .card:hover { transform: none; }
}
/* ============================================================
LIGHT-CI THEME — überschreibt das alte Dunkel-Styling
Basis Weiß / #EEEFF3, Text Navy #142946, Akzent Türkis #1FA9B9
============================================================ */
/* ---- Typografie: solide Navy-Headlines statt Gradient-Clip ---- */
.h1, .h2, .h3 {
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: currentColor;
color: var(--navy);
padding-bottom: 0;
}
/* ---- Eyebrow-Pill: gleiche Glas-/Chrom-Oberfläche wie die Pills ---- */
.eyebrow {
color: var(--accent-deep);
background:
linear-gradient(135deg,
rgba(255,255,255,0.95) 0%,
rgba(188,238,228,0.55) 26%,
rgba(255,255,255,0.40) 50%,
rgba(186,224,247,0.55) 74%,
rgba(255,255,255,0.92) 100%);
border: 1px solid rgba(255,255,255,0.85);
-webkit-backdrop-filter: blur(3px) saturate(1.3);
backdrop-filter: blur(3px) saturate(1.3);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -2px 3px rgba(31,169,185,0.14),
0 0 0 1px rgba(31,169,185,0.10),
0 6px 14px -8px rgba(31,169,185,0.30);
}
.eyebrow::before {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 8px rgba(31,169,185,0.5);
}
/* ---- Section-Wechsel + Deko ---- */
.section--alt { background: var(--bg-alt); }
.section__orna { display: none; }
/* Linien starten an der Pill und faden nach außen aus (polychrom) */
.section-head::before,
.section-head::after {
background: linear-gradient(90deg, #1FA9B9 0%, #46CBD6 48%, rgba(95,224,240,0) 100%);
}
/* ---- Glas-Flächen hell ---- */
.glass {
background:
linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%),
var(--glass-base);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-card);
}
.glass::before {
background: linear-gradient(135deg,
rgba(255,255,255,0.9) 0%,
rgba(255,255,255,0) 45%,
rgba(31,169,185,0.18) 100%);
}
/* ---- Problem-Karten hell ---- */
.card {
background: #FFFFFF;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid var(--glass-border);
box-shadow:
0 1px 0 rgba(255,255,255,0.7),
0 20px 44px -24px rgba(20,41,70,0.18),
0 8px 18px -14px rgba(20,41,70,0.12);
}
.card:hover {
border-color: rgba(31,169,185,0.4);
box-shadow:
0 24px 50px -22px rgba(20,41,70,0.22),
0 0 0 1px rgba(31,169,185,0.16);
}
.card > .card__num {
background: none;
-webkit-text-fill-color: currentColor;
color: var(--accent);
opacity: 0.16;
}
.card__icon {
color: var(--accent);
background: var(--accent-soft);
border: 1px solid rgba(31,169,185,0.22);
box-shadow: none;
}
.card__title { color: var(--navy); }
.card__body { color: var(--text-body); }
/* ---- Angebot-Karten ---- */
.card--offer .card__media {
background:
radial-gradient(70% 70% at 50% 30%, rgba(31,169,185,0.18) 0%, rgba(238,239,243,0) 70%),
linear-gradient(160deg, #F2F5F9 0%, #E7ECF2 100%);
border-bottom: 1px solid var(--glass-border);
}
.card--offer .card__media::before { opacity: 0; }
.card--offer .card__media-glyph {
color: #FFFFFF;
border: 1px solid rgba(31,169,185,0.5);
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,0.55),
0 14px 28px -10px rgba(31,169,185,0.5);
}
/* ---- Hinweis-Block ---- */
.notice {
background: var(--accent-faint);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid rgba(31,169,185,0.22);
box-shadow: 0 14px 32px -22px rgba(20,41,70,0.18);
}
.notice__icon {
background: #FFFFFF;
color: var(--accent);
border: 1px solid rgba(31,169,185,0.25);
box-shadow: none;
}
.notice__title { color: var(--navy); }
.notice__text { color: var(--text-body); }
/* ---- Pills: Glas-/Chrom-Oberfläche wie die Hero-Splitter ---- */
.pill {
color: var(--navy);
background:
linear-gradient(135deg,
rgba(255,255,255,0.95) 0%,
rgba(188,238,228,0.55) 26%,
rgba(255,255,255,0.40) 50%,
rgba(186,224,247,0.55) 74%,
rgba(255,255,255,0.92) 100%);
border: 1px solid rgba(255,255,255,0.85);
-webkit-backdrop-filter: blur(3px) saturate(1.3);
backdrop-filter: blur(3px) saturate(1.3);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -2px 3px rgba(31,169,185,0.14),
0 0 0 1px rgba(31,169,185,0.10),
0 6px 14px -8px rgba(31,169,185,0.30);
}
/* ---- Split-Media: Platzhalter-Kachel mit CI-Farbverlauf ---- */
.split__media {
background:
linear-gradient(135deg, rgba(31,169,185,0.22) 0%, rgba(56,195,211,0.13) 42%, rgba(20,41,70,0.10) 100%),
linear-gradient(160deg, #F3F6FA 0%, #E7ECF2 100%);
border: 1px solid var(--glass-border);
box-shadow:
0 24px 56px -26px rgba(20,41,70,0.2),
inset 0 1px 0 rgba(255,255,255,0.7);
}
.split__ph {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(20,41,70,0.42);
}
/* ---- CSS-Mockups auf hell ---- */
.mock {
background: #FFFFFF;
border: 1px solid var(--glass-border);
box-shadow:
0 18px 40px -22px rgba(20,41,70,0.22),
inset 0 1px 0 rgba(255,255,255,0.8);
}
.mock__chrome {
background: #F4F6F9;
border-bottom: 1px solid var(--glass-border);
color: var(--text-quiet);
}
.mock__dots span { background: rgba(20,41,70,0.12); }
.mock__dots span:first-child { background: rgba(231,90,90,0.6); }
.mock__dots span:nth-child(2) { background: rgba(231,170,40,0.6); }
.mock__dots span:nth-child(3) { background: rgba(40,190,120,0.6); }
.mock__url {
background: #FFFFFF;
border: 1px solid var(--glass-border);
color: var(--text-quiet);
}
.mock__sidebar {
background: #F7F8FB;
border-right: 1px solid var(--glass-border);
}
.mock__nav-item.is-active {
color: var(--accent-deep);
background: var(--accent-soft);
border: 1px solid rgba(31,169,185,0.3);
box-shadow: none;
}
.mock__nav-dot { background: rgba(20,41,70,0.2); }
.mock__nav-item.is-active .mock__nav-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent-halo); }
.mock__tile {
background: #F4F6F9;
border: 1px solid var(--glass-border);
box-shadow: none;
}
.mock__tile--accent {
background: var(--accent-soft);
border-color: rgba(31,169,185,0.3);
}
.mock__tile-value { color: var(--navy); }
.mock__sparkline {
background: linear-gradient(90deg, rgba(20,41,70,0.1) 0%, rgba(20,41,70,0.18) 60%, rgba(20,41,70,0.08) 100%);
}
.mock__sparkline--accent {
background: linear-gradient(90deg, rgba(31,169,185,0.4) 0%, rgba(31,169,185,0.6) 60%, rgba(31,169,185,0.35) 100%);
}
.mock--people {
background:
radial-gradient(40% 40% at 50% 50%, rgba(31,169,185,0.1) 0%, rgba(255,255,255,0) 70%),
#FFFFFF;
}
.mock--people .mock__edges { stroke: rgba(31,169,185,0.3); }
.mock__avatar {
color: var(--navy);
background: #EEF1F5;
border: 1px solid var(--glass-border);
box-shadow: 0 4px 10px -6px rgba(20,41,70,0.25);
}
.mock__avatar--lg {
color: #FFFFFF;
border-color: rgba(31,169,185,0.5);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
0 12px 28px -10px rgba(31,169,185,0.5);
}
.mock--roadmap { background: #FFFFFF; }
.mock__bar-label { color: var(--navy); }
.mock__timeline { border-top: 1px dashed rgba(20,41,70,0.14); }
/* ---- Ablauf-Schritte hell ---- */
.step {
background: #FFFFFF;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid var(--glass-border);
box-shadow:
0 1px 0 rgba(255,255,255,0.7),
0 20px 44px -24px rgba(20,41,70,0.16),
0 8px 18px -14px rgba(20,41,70,0.12);
}
.step:hover { border-color: rgba(31,169,185,0.4); }
.step__num { color: var(--accent-deep); }
.step__title { color: var(--navy); }
.step__body { color: var(--text-body); }
/* ---- Über uns ---- */
.about__media {
background:
linear-gradient(135deg, rgba(31,169,185,0.22) 0%, rgba(56,195,211,0.13) 42%, rgba(20,41,70,0.10) 100%),
linear-gradient(160deg, #F3F6FA 0%, #E7ECF2 100%);
border: 1px solid var(--glass-border);
box-shadow:
0 24px 56px -26px rgba(20,41,70,0.2),
inset 0 1px 0 rgba(255,255,255,0.7);
}
.about__media::before { opacity: 0; }
.about__media::after { color: var(--text-quiet); }
.about__silhouette {
background:
radial-gradient(60% 30% at 50% 10%, rgba(31,169,185,0.22) 0%, rgba(238,239,243,0) 60%),
linear-gradient(180deg, #FFFFFF 0%, #EAEEF3 100%);
border: 1px solid var(--glass-border);
}
/* ---- FAQ hell ---- */
.faq__item {
background: #FFFFFF;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid var(--glass-border);
box-shadow: 0 8px 20px -16px rgba(20,41,70,0.14);
}
.faq__item[open] { border-color: rgba(31,169,185,0.4); }
.faq__summary { color: var(--navy); }
.faq__chevron { color: var(--accent); }
.faq__answer { color: var(--text-body); }
/* ---- CTA als türkise Voll-Section ---- */
.section--cta {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
}
.cta {
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: none;
box-shadow: none;
padding: 0;
}
.cta__head .h2 { color: #FFFFFF; }
.cta__head .lead { color: rgba(255,255,255,0.88); }
.section--cta .field > label { color: rgba(255,255,255,0.92); }
.section--cta .consent { color: rgba(255,255,255,0.9); }
.section--cta .consent a { color: #FFFFFF; text-decoration: underline; }
.section--cta .form__status { color: rgba(255,255,255,0.9); }
.section--cta .btn--primary { background: #FFFFFF; color: var(--navy); }
.section--cta .btn--primary .btn__circle { background: var(--navy); color: #FFFFFF; }
/* ---- Form-Felder hell ---- */
.input, .textarea, .select {
color: var(--navy);
background: #FFFFFF;
border: 1px solid rgba(255,255,255,0.55);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 8px 20px -16px rgba(20,41,70,0.25);
}
.input:focus, .textarea:focus, .select:focus {
border-color: #FFFFFF;
box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
}
.input::placeholder, .textarea::placeholder { color: #98A2B1; }
/* ---- Footer dunkel (Navy) ---- */
.footer {
background: var(--navy);
border-top: none;
}
.footer::before {
background: radial-gradient(60% 100% at 50% 50%, rgba(31,169,185,0.5) 0%, rgba(31,169,185,0) 100%);
}
.footer__brand, .footer__col-title { color: #FFFFFF; }
.footer__brand .nav__brand-mark { background: var(--accent); }
.footer__desc { color: rgba(255,255,255,0.6); }
.footer__contact { color: rgba(255,255,255,0.72); }
.footer__contact a, .footer__col a:hover { color: var(--accent-bright); }
.footer__col a { color: rgba(255,255,255,0.62); }
.footer__bar {
color: rgba(255,255,255,0.45);
border-top: 1px solid rgba(255,255,255,0.12);
}
/* ---- Wiederkehrende Stilmittel: türkiser Punkt + fettere Headlines ---- */
/* Punkt nur noch im Hero, überall sonst ausblenden */
.dot { color: var(--accent); display: none; }
.hero__title .dot { display: inline; }
/* Section-Headlines im gleichen Gewicht wie die Block-Titel (nur der Hero ist dicker) */
.h2 { font-weight: 600; }
/* ---- Sanft gewellte Übergänge zwischen den Sections ---- */
.divider {
position: relative;
z-index: 3;
height: 90px;
margin: -30px 0;
line-height: 0;
pointer-events: none;
background: var(--wave-top, #FFFFFF);
}
.divider svg {
display: block;
width: 100%;
height: 100%;
}
.divider svg path {
fill: var(--wave-bottom, #EEEFF3);
}
/* Gegenrichtung gespiegelt, damit die Wellen nicht mechanisch gleich wirken */
.divider--up svg { transform: scaleX(-1); }
/* Footer-Welle: die separate Teal-Linie entfällt, die Welle übernimmt den Übergang */
.divider--footer + .footer { border-top: 0; }
.divider--footer + .footer::before { display: none; }
@media (max-width: 700px) {
.divider { height: 56px; margin: -18px 0; }
}
/* ---- Problem-Karten: selbstbewusster, weniger generisch ---- */
.card {
border-radius: 16px;
padding: 32px 30px 30px;
}
.card:hover { transform: translateY(-4px); }
.card, .card:hover { transition: transform .4s var(--reveal-ease), border-color .25s var(--reveal-ease), box-shadow .25s var(--reveal-ease); }
.card > .card__num {
font-size: 44px;
font-weight: 700;
top: 26px;
opacity: 0.1;
}
.card__icon {
width: 56px;
height: 56px;
border-radius: 16px;
}
.card__icon svg { width: 28px; height: 28px; }
.card__title {
font-size: clamp(21px, 1.9vw, 24px);
font-weight: 700;
letter-spacing: -0.025em;
margin-top: 6px;
}
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
/* ---- Angebot: OpenNext-Split-Card (weißer Kopf / türkiser Füllblock) ---- */
.ocards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) { .ocards { grid-template-columns: 1fr; } }
.ocard {
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
background: #FFFFFF;
border: 1px solid var(--glass-border);
box-shadow:
0 20px 44px -24px rgba(20,41,70,0.18),
0 8px 18px -14px rgba(20,41,70,0.12);
transition: transform .4s var(--reveal-ease), box-shadow .25s var(--reveal-ease);
}
.ocard:hover {
transform: translateY(-4px);
box-shadow:
0 30px 56px -24px rgba(20,41,70,0.26),
0 0 0 1px rgba(31,169,185,0.18);
}
/* Oben: freier Bereich als Bild-Platzhalter mit CI-Verlauf */
.ocard__media {
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(135deg, rgba(31,169,185,0.22) 0%, rgba(56,195,211,0.13) 42%, rgba(20,41,70,0.10) 100%),
linear-gradient(160deg, #F3F6FA 0%, #E7ECF2 100%);
border-bottom: 1px solid var(--glass-border);
}
.ocard__ph {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(20,41,70,0.42);
}
/* Unten: türkiser Panel mit Headline + Beschreibung */
.ocard__panel {
flex: 1;
background: linear-gradient(160deg, #15314F 0%, #103A4E 100%);
color: #FFFFFF;
padding: 26px 28px 30px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* leichte Farbvarianz im dunklen Blau, damit die drei Panels nicht gleichförmig wirken */
.ocards .ocard:nth-child(1) .ocard__panel { background: linear-gradient(160deg, #142946 0%, #124253 100%); }
.ocards .ocard:nth-child(2) .ocard__panel { background: linear-gradient(160deg, #163450 0%, #103746 100%); }
.ocards .ocard:nth-child(3) .ocard__panel { background: linear-gradient(160deg, #122B47 0%, #0F3F52 100%); }
.ocard__body strong { font-weight: 700; color: #FFFFFF; }
.ocard__body { color: rgba(255,255,255,0.85); }
/* sanfter polychromer Licht-Glow unten rechts, löst das Dunkle etwas auf */
.ocard__panel { position: relative; }
.ocard__panel > * { position: relative; z-index: 1; }
.ocard__panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
filter: blur(12px);
}
/* je Karte anders platziert und sehr dezent, damit es organisch wirkt */
.ocards .ocard:nth-child(1) .ocard__panel::after {
background:
radial-gradient(75% 85% at 100% 100%, rgba(95,224,240,0.11) 0%, transparent 60%),
radial-gradient(46% 56% at 82% 96%, rgba(150,120,235,0.05) 0%, transparent 62%);
}
.ocards .ocard:nth-child(2) .ocard__panel::after {
background:
radial-gradient(78% 82% at 4% 100%, rgba(80,222,185,0.09) 0%, transparent 62%),
radial-gradient(52% 56% at 96% 6%, rgba(95,224,240,0.05) 0%, transparent 60%);
}
.ocards .ocard:nth-child(3) .ocard__panel::after {
background:
radial-gradient(66% 76% at 96% 90%, rgba(110,205,245,0.10) 0%, transparent 60%),
radial-gradient(48% 56% at 78% 100%, rgba(150,120,235,0.05) 0%, transparent 62%);
}
.ocard__title {
margin: 0 0 6px;
font-size: clamp(20px, 1.9vw, 24px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.022em;
color: #FFFFFF;
}
.ocard__body {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,0.92);
}
@media (prefers-reduced-motion: reduce) {
.ocard:hover { transform: none; }
}
/* ---- Beratungshäuser: volle Breite, Bild-Platzhalter links ---- */
.consulting {
margin-top: 24px;
display: grid;
grid-template-columns: 5fr 7fr;
border-radius: 16px;
overflow: hidden;
background: #FFFFFF;
border: 1px solid var(--glass-border);
box-shadow:
0 20px 44px -24px rgba(20,41,70,0.18),
0 8px 18px -14px rgba(20,41,70,0.12);
}
.consulting__media {
display: flex;
align-items: center;
justify-content: center;
min-height: 230px;
background:
linear-gradient(135deg, rgba(31,169,185,0.22) 0%, rgba(56,195,211,0.13) 42%, rgba(20,41,70,0.10) 100%),
linear-gradient(160deg, #F3F6FA 0%, #E7ECF2 100%);
border-right: 1px solid var(--glass-border);
}
.consulting__text {
padding: 38px 42px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
.consulting__title {
margin: 0;
font-size: clamp(22px, 2.2vw, 26px);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--navy);
}
.consulting__body {
margin: 0;
font-size: 16px;
line-height: 1.65;
color: var(--text-body);
}
.consulting__body strong { font-weight: 700; color: var(--navy); }
.consulting__body + .consulting__body { margin-top: 14px; }
@media (max-width: 760px) {
.consulting { grid-template-columns: 1fr; }
.consulting__media { min-height: 150px; border-right: none; border-bottom: 1px solid var(--glass-border); }
.consulting__text { padding: 28px 24px; }
}
/* ---- Akzent-Wort in Headlines (z. B. "Sie") ---- */
.accent-text { color: var(--accent); }
/* ---- Ablauf: gestapelte Karten mit dicker, polychromer Zahl ---- */
.steps {
display: flex;
flex-direction: column;
grid-template-columns: none;
gap: 16px;
max-width: 920px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.step {
position: relative;
display: block;
padding: 30px 34px 30px 134px;
border-radius: 16px;
background: #FFFFFF;
border: 1px solid var(--glass-border);
box-shadow: 0 14px 34px -22px rgba(20,41,70,0.2);
overflow: hidden;
}
.step:hover { border-color: rgba(31,169,185,0.4); }
/* Große Zahl, unten links aufsetzend, polychrom und nach unten ausfadend */
.step__num {
position: absolute;
left: 28px;
bottom: 6px;
margin: 0;
font-size: clamp(90px, 8.6vw, 132px);
font-weight: 800;
line-height: 0.78;
letter-spacing: -0.04em;
text-transform: none;
opacity: 0.45;
background: linear-gradient(180deg,
#4FC0CF 0%,
#62C3D0 26%,
rgba(120,200,212,0.55) 60%,
rgba(255,255,255,0.0) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.step__num::before { display: none; }
.step__title { margin: 0 0 6px; font-size: 20px; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; }
.step__body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-body); }
@media (max-width: 600px) {
.step { padding: 24px 22px 24px 84px; }
.step__num { left: 16px; font-size: 78px; }
}
/* ---- Über uns: Platzhalter zentriert, Caption weg, Button-Abstand ---- */
.about__media { align-items: center; }
.about__media::after { content: ""; }
.about__cta { margin-top: 28px; }
/* ---- Eyebrows / Pills nutzen die globale Schriftart (Switzer) ---- */
.eyebrow,
.pill {
font-family: "Switzer", system-ui, sans-serif;
}
.split__ph,
.ocard__ph {
font-family: "Switzer", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
/* ---- Hero-Feinschliff ---- */
.hero__title {
font-size: clamp(40px, 4.4vw, 56px);
max-width: 880px;
font-weight: 600;
}
/* Hero-Tagline als Glas-Pill wie die übrigen Eyebrows, nur 14px (Hero-Größe) */
.hero__kicker {
margin: 0 0 30px;
display: flex;
width: fit-content;
font-size: 14px;
}
/* Weicher weißer Übergang vom Hero zur Logo-Wand (keine harte Kante) */
.hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 170px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #FFFFFF 100%);
pointer-events: none;
z-index: 1;
}
/* ---- Button-Kreise: nur dezenter Schimmer auf der Fläche, keine Glaskante/3D ---- */
.btn__circle {
background:
linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 52%),
radial-gradient(120% 120% at 32% 24%, #45C9D5 0%, #29B1C2 52%, #1FA9B9 100%);
box-shadow: 0 4px 10px -7px rgba(31,169,185,0.45);
}
/* Auf der türkisen CTA-Section bleibt der Kreis dunkel (Kontrast), nur leichter Schimmer */
.section--cta .btn--primary .btn__circle {
background:
linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 52%),
var(--navy);
box-shadow: none;
}
/* ---- Telefonnummer im Header ---- */
.nav__cta {
display: flex;
align-items: center;
gap: 24px;
}
.nav__phone {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--navy);
white-space: nowrap;
}
.nav__phone svg { width: 17px; height: 17px; color: var(--accent); }
.nav__phone:hover { color: var(--accent-deep); }
@media (max-width: 1080px) { .nav__phone { display: none; } }
/* ---- Animationen aktiv: Reveal-System + Hover leben wieder ---- */
/* (frueherer globaler Static-Killschalter wurde entfernt) */
/* Logo-Wand laeuft weiter */
.marquee__track {
animation: marquee 48s linear infinite !important;
}
/* Nahtloser Übergang Hero -> Logo-Wand: kein Trennstrich */
.logowall { border-top: none; }
/* ---- Linien neben den Eyebrow-Pills überall entfernen ---- */
.section-head::before,
.section-head::after { display: none !important; }
/* ---- Ausgangslage: Nummern raus, glasige Polychrom-Kachel mit Fehler-Icon ---- */
#problem .card__num { display: none; }
#problem .card__icon {
position: relative;
z-index: 1;
background:
linear-gradient(135deg,
rgba(255,255,255,0.95) 0%,
rgba(188,238,228,0.55) 26%,
rgba(255,255,255,0.40) 50%,
rgba(186,224,247,0.55) 74%,
rgba(255,255,255,0.92) 100%);
border: 1px solid rgba(255,255,255,0.85);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -2px 3px rgba(31,169,185,0.14),
0 0 0 1px rgba(31,169,185,0.10),
0 6px 14px -8px rgba(31,169,185,0.30);
}
/* Icon-Körper in Navy, der Fehler-Strich im Türkis-Akzent */
#problem .card__icon svg { display: block; color: var(--navy); }
#problem .card__icon .ic-strike { stroke: var(--accent); }
/* ---- Ganz dezenter polychromer Glas-Wash, nur oben rechts ---- */
#problem .card { overflow: hidden; }
#problem .card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(50% 45% at 90% 6%, rgba(95,224,240,0.09) 0%, rgba(79,208,196,0.035) 42%, rgba(255,255,255,0) 70%);
}
/* ---- Hochwertiges Chrom-Wort in Headlines (dezent animiert) ---- */
/* ---- Handgezeichneter Marker-Unterstrich (Pillen-Farbverlauf) ---- */
.hl-mark {
position: relative;
display: inline-block;
white-space: nowrap;
z-index: 0;
}
/* Marker-Hervorhebung hinter dem Wort: dezent, leicht abgerundet, wie die Pill-Farbwelt */
.hl-mark::before {
content: "";
position: absolute;
left: -0.14em;
right: -0.14em;
bottom: 0.05em;
height: 0.40em;
background: linear-gradient(90deg, rgba(31,169,185,0.20) 0%, rgba(95,224,240,0.22) 50%, rgba(31,169,185,0.20) 100%);
border-radius: 5px;
z-index: -1;
pointer-events: none;
}
.hl-mark__line { display: none; }
/* Martins Signatur + Rolle in der Über-uns-Sektion (Trust) */
.about__sign { margin-top: 30px; }
.about__sign-img {
display: block;
width: auto;
height: auto;
max-width: 230px;
max-height: 84px;
opacity: 0.92;
mix-blend-mode: multiply;
}
.about__sign-name {
margin: 8px 0 0;
font-style: italic;
font-size: 14px;
letter-spacing: 0.01em;
color: var(--text-quiet);
}
/* Marker-Strich ist statisch sichtbar (keine Einzeichen-Animation beim Scrollen). */
/* ---- Headline-Umbruch nur auf Desktop ---- */
@media (max-width: 700px) { .hl-br { display: none; } }
/* ---- Pills unten in gleicher Akzentfarbe wie die Eyebrows ---- */
.pill { color: var(--navy); }
/* ---- Schlüsselwörter in den USP-Texten als visuelle Anker ---- */
.split__text .body strong { font-weight: 700; color: var(--navy); }
/* ---- Tag-Pills (Lösung): neutrale, weiß-graue Glasoberfläche (ohne Farbe) ---- */
.pill {
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(236,239,243,0.78) 50%, rgba(255,255,255,0.9) 100%);
border: 1px solid rgba(255,255,255,0.9);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.85),
0 0 0 1px rgba(20,41,70,0.05),
0 3px 8px -6px rgba(20,41,70,0.14);
}
/* ===========================================================
Schluss-CTA — cleaner weißer Abschnitt (statt türkiser Form-Wand)
=========================================================== */
.section--final-cta {
background: #FFFFFF;
text-align: center;
}
/* Bühne: zentriert den CTA, hält links/rechts die Logo-Spuren */
.finalcta-stage {
position: relative;
max-width: var(--container-max);
margin: 0 auto;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
}
.finalcta {
position: relative;
z-index: 2;
max-width: 920px;
margin: 0 auto;
}
/* ---- Vertikale Logo-Spuren links (nach oben) & rechts (nach unten) ---- */
.cticker {
display: none;
position: absolute;
top: 0;
bottom: 0;
width: 140px;
overflow: hidden;
z-index: 1;
pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.cticker--left { left: 0; }
.cticker--right { right: 0; }
.cticker__track {
position: absolute;
top: 0;
left: 0;
right: 0;
will-change: transform;
}
.ctile {
height: 104px;
margin-bottom: 16px;
border-radius: 18px;
background: #FFFFFF;
border: 1px solid rgba(20,41,70,0.06);
box-shadow:
0 14px 30px -20px rgba(20,41,70,0.22),
inset 0 1px 0 rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.ctile img {
max-width: 100%;
max-height: 40px;
width: auto;
height: auto;
object-fit: contain;
opacity: 0.35;
}
@keyframes cticker-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes cticker-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.cticker--left .cticker__track { animation: cticker-up 50s linear infinite !important; }
.cticker--right .cticker__track { animation: cticker-down 50s linear infinite !important; }
/* Nur einblenden, wenn rechts und links genug Platz neben dem CTA ist */
@media (min-width: 1320px) {
.cticker { display: block; }
}
/* Headline nutzt exakt den .h2-Stil der übrigen Sections (Gewicht 600, gleiche Größe) */
.finalcta__title {
margin: 0 auto;
text-wrap: balance;
}
.finalcta__sub {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.6;
color: var(--text-body);
max-width: 880px;
margin: 20px auto 0;
text-wrap: normal;
}
/* Methodik-Kopf: ausgewogene Zeilen ohne erzwungene Umbrüche */
#modell-headline { text-wrap: balance; }
#modell .section-head .lead { text-wrap: balance; }
.finalcta__actions {
margin-top: 34px;
}
.finalcta__btn {
height: 60px;
font-size: 17px;
}
/* ===========================================================
Footer — aufgeräumt, hochwertiger, mit Trainer-werden-Block
=========================================================== */
.footer__inner {
grid-template-columns: 1.7fr 1fr 1fr 1.6fr;
align-items: start;
}
/* Platzhalter-Wortmarke (noch kein Logo) */
.footer__brand {
text-transform: none;
letter-spacing: -0.01em;
font-size: 18px;
font-weight: 600;
color: #FFFFFF;
}
.footer__trainer {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer__trainer-text {
margin: 0 0 20px;
max-width: 300px;
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,0.6);
}
.footer__trainer-btn {
position: relative;
z-index: 0;
overflow: hidden;
isolation: isolate;
display: inline-flex;
align-items: center;
gap: 14px;
height: 52px;
padding: 0 7px 0 24px;
border-radius: var(--radius-btn);
color: #FFFFFF;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.01em;
text-decoration: none;
/* Dunkle Glasfläche mit feinem Türkis-Schimmer oben links */
background:
linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 44%),
radial-gradient(150% 190% at 16% 4%, rgba(86,200,212,0.30) 0%, rgba(31,169,185,0.10) 34%, rgba(20,41,70,0) 72%),
linear-gradient(162deg, #1d3b5b 0%, #163350 58%, #122c47 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
inset 0 -1px 1px rgba(0,0,0,0.30),
0 12px 26px -16px rgba(0,0,0,0.65),
0 0 24px -8px rgba(31,169,185,0.30);
/* Transition gezielt wieder an (global ist sie aus) — für den butterweichen Lift */
transition: transform .45s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
/* Unregelmäßiger, glasig glühender Rand (Ruhezustand) */
.footer__trainer-btn::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
rgba(255,255,255,0.92) 0%,
rgba(132,228,238,0.60) 16%,
rgba(31,169,185,0.18) 40%,
rgba(255,255,255,0.05) 58%,
rgba(150,206,255,0.42) 82%,
rgba(255,255,255,0.78) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* Umlaufendes Licht: rotierender Conic (GPU-transform, ruckelfrei) */
.footer__trainer-beam {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 260%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
background: conic-gradient(from 0deg,
rgba(255,255,255,0) 0deg,
rgba(255,255,255,0) 300deg,
rgba(150,235,245,0) 306deg,
rgba(178,242,248,0.85) 338deg,
#FFFFFF 350deg,
rgba(178,242,248,0.85) 360deg);
opacity: 0;
pointer-events: none;
will-change: transform;
}
/* Innenfläche deckt die Mitte ab, sodass nur der Rand leuchtet */
.footer__trainer-btn::after {
content: "";
position: absolute;
z-index: 3;
inset: 1.5px;
border-radius: inherit;
background:
linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 44%),
radial-gradient(150% 190% at 16% 4%, rgba(86,200,212,0.30) 0%, rgba(31,169,185,0.10) 34%, rgba(20,41,70,0) 72%),
linear-gradient(162deg, #1d3b5b 0%, #163350 58%, #122c47 100%);
pointer-events: none;
}
/* Hover: Text bleibt weiß, Licht läuft am Rand um, Button liftet ganz leicht */
.footer__trainer-btn:hover {
color: #FFFFFF;
transform: translateY(-3px);
}
.footer__trainer-btn:hover .footer__trainer-beam {
opacity: 1;
animation: trainer-spin 2.4s linear infinite !important;
}
@keyframes trainer-spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.footer__trainer-label { position: relative; z-index: 4; }
/* Heller, glasiger weißer Kreis mit dunklem Pfeil (klarer Kontrast) */
.footer__trainer-circle {
position: relative;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: 0 0 auto;
border-radius: 50%;
color: var(--navy);
background:
linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.78) 52%, rgba(223,240,243,0.92) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -2px 3px rgba(31,169,185,0.20),
0 3px 8px -3px rgba(0,0,0,0.30);
}
.footer__trainer-circle svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
.footer__inner { grid-template-columns: 1fr 1fr; }
.footer__trainer { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.footer__inner { grid-template-columns: 1fr; }
}
/* ===========================================================
FAQ — zweispaltig: links Intro + Platzhalter, rechts Fragen
=========================================================== */
.faq-layout {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 72px;
align-items: start;
}
.faq-intro {
display: flex;
flex-direction: column;
}
.faq-intro .eyebrow { margin-bottom: 22px; align-self: flex-start; }
.faq-intro .h2 {
margin: 0;
text-align: left;
font-size: clamp(28px, 3vw, 40px);
}
.faq-intro .lead {
margin: 18px 0 0;
text-align: left;
max-width: 470px;
}
.faq-intro__media {
margin-top: 40px;
aspect-ratio: 16 / 9;
flex: 0 0 auto;
width: 100%;
}
.faq-layout .faq-list {
max-width: none;
margin: 0;
}
@media (max-width: 900px) {
.faq-layout { grid-template-columns: 1fr; gap: 36px; }
.faq-intro .lead { max-width: none; }
.faq-intro__media { margin-top: 28px; flex: 0 0 auto; aspect-ratio: 4 / 3; }
}
/* ===========================================================
Hero — zweispaltig: links Text, rechts Multistep-Glaskarte
=========================================================== */
.hero__inner--split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(520px, 620px);
gap: 44px;
align-items: center;
}
.hero__inner--split .hero__title { max-width: 780px; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.16; font-weight: 600; }
.hero__inner--split .hero__sub { max-width: 500px; margin-top: 32px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; }
@media (min-width: 1041px) {
.hero__inner--split .hero__title { white-space: nowrap; }
.hero__inner--split .hero__title br { white-space: normal; }
.hero__inner--split .hero__form { margin-top: 12px; }
}
.hero__form { width: 100%; }
/* Bullets mit CI-Haken */
.hero__bullets {
list-style: none;
margin: 42px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 22px;
}
.hero__bullet {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 17px;
font-weight: 400;
letter-spacing: -0.005em;
line-height: 1.58;
color: var(--text-body);
}
.hero__bullet-text strong {
font-weight: 700;
color: var(--navy);
}
.hero__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 27px;
height: 29px;
flex: 0 0 auto;
margin-top: 1px;
filter: drop-shadow(0 3px 7px rgba(16,110,180,0.32));
}
.hero__check svg { width: 27px; height: 29px; }
@media (max-width: 1040px) {
.hero__inner--split { grid-template-columns: 1fr; gap: 34px; }
.hero__form { max-width: 540px; }
}
/* ---- Multistep-Anfrage (Liquid-Glass / Glasmorphism) ---- */
.msf {
position: relative;
border-radius: 20px;
overflow: hidden;
/* polychrome Glasfläche wie die Eyebrow-Pills (Weiß · Mint · Blau) */
background: linear-gradient(140deg,
rgba(255,255,255,0.74) 0%,
rgba(194,240,232,0.44) 24%,
rgba(255,255,255,0.46) 50%,
rgba(194,224,248,0.46) 76%,
rgba(255,255,255,0.72) 100%);
-webkit-backdrop-filter: blur(24px) saturate(1.5);
backdrop-filter: blur(24px) saturate(1.5);
border: none;
box-shadow:
inset 0 -2px 6px rgba(31,169,185,0.10),
0 30px 68px -32px rgba(20,41,70,0.4);
}
.msf__head {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 24px;
background: var(--navy);
color: #FFFFFF;
font-family: "Switzer", sans-serif;
font-size: 15.5px;
font-weight: 500;
letter-spacing: 0;
}
.msf__head-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: var(--accent-bright);
}
.msf__head-icon svg { width: 18px; height: 18px; }
.msf__body { padding: 24px 28px 8px; }
.msf__step { display: none; }
.msf__step.is-active { display: block; }
.msf__q {
margin: 4px 0 48px;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--navy);
}
.msf__options { display: flex; flex-direction: column; gap: 10px; }
.msf__opt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
text-align: left;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid rgba(20,41,70,0.12);
background: rgba(255,255,255,0.72);
color: var(--navy);
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.msf__opt:hover { border-color: rgba(31,169,185,0.5); background: rgba(255,255,255,0.92); }
.msf__opt.is-selected {
border-color: var(--accent);
background: rgba(31,169,185,0.10);
box-shadow: inset 0 0 0 1px var(--accent);
}
.msf__opt-tick {
width: 20px; height: 20px;
flex: 0 0 auto;
border-radius: 50%;
border: 2px solid rgba(20,41,70,0.22);
position: relative;
transition: border-color .2s ease, background .2s ease !important;
}
.msf__opt.is-selected .msf__opt-tick {
border-color: var(--accent);
background: var(--accent);
box-shadow: inset 0 0 0 3px #FFFFFF;
}
.msf__fields { display: flex; flex-direction: column; gap: 10px; }
.msf__input {
width: 100%;
height: 46px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid rgba(20,41,70,0.16);
background: rgba(255,255,255,0.88);
color: var(--navy);
font: 400 15px/1.4 "Switzer", sans-serif;
}
.msf__input::placeholder { color: #8a95a4; }
.msf__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,169,185,0.18); }
.msf__consent {
display: flex; gap: 10px; align-items: flex-start;
margin-top: 12px;
font-size: 12.5px; line-height: 1.45;
color: var(--text-body);
}
.msf__consent input { margin-top: 2px; accent-color: var(--accent); }
.msf__step--done { text-align: center; padding: 8px 0 4px; }
.msf__done-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 50px; height: 50px; margin-bottom: 12px;
border-radius: 50%;
background: rgba(31,169,185,0.14);
color: var(--accent-deep);
}
.msf__done-icon svg { width: 26px; height: 26px; }
.msf__done-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-body); }
.msf__next {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: calc(100% - 56px);
box-sizing: border-box;
margin: 18px 28px 0;
height: 52px;
border: none;
border-radius: var(--radius-btn);
background: var(--navy);
color: #FFFFFF;
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 14px 26px -14px rgba(20,41,70,0.6);
transition: transform .25s ease, opacity .2s ease, box-shadow .25s ease !important;
}
.msf__next:hover { transform: translateY(-2px); }
.msf__next svg { width: 18px; height: 18px; }
.msf__next[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.msf__foot { padding: 16px 28px 22px; }
.msf__progress {
height: 4px;
border-radius: 4px;
background: rgba(20,41,70,0.10);
overflow: hidden;
}
.msf__bar {
display: block;
height: 100%;
width: 20%;
border-radius: 4px;
background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
transition: width .35s ease !important;
}
.msf__trust {
margin: 11px 0 0;
font-family: "Switzer", sans-serif;
font-size: 11.5px;
letter-spacing: 0.02em;
color: #6B7686;
text-align: center;
}
/* ---- Easy-Entry: zwei Bild-Optionskarten (Aufbau wie Safest) ---- */
.msf__choices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.msf__choice {
position: relative;
display: flex;
flex-direction: column;
overflow: visible;
cursor: pointer;
padding: 0;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.6);
background: rgba(255,255,255,0.42);
transition: border-color .2s ease, box-shadow .2s ease !important;
/* dezenter Attention-Lift alle 6s (wie Safest) */
animation: msfTileLift 6s ease-in-out infinite !important;
}
.msf__choice:nth-of-type(2) { animation-delay: .3s !important; }
.msf__choice:hover { border-color: var(--accent); box-shadow: 0 14px 30px -16px rgba(20,41,70,0.28); }
.msf__choice.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.msf__choice:hover, .msf__choice.is-selected { animation: none !important; }
@keyframes msfTileLift {
0%, 84%, 100% { transform: translateY(0); }
90% { transform: translateY(-6px); }
95% { transform: translateY(0); }
}
/* Oberteil komplett, randlos mit Glas-Farbe gefüllt (oben-Ecken vom Container geclippt) */
.msf__choice-media {
position: relative;
height: 130px;
border-radius: 15px 15px 0 0;
overflow: visible;
display: flex;
align-items: flex-end;
justify-content: center;
background: linear-gradient(160deg, rgba(86,200,212,0.34) 0%, rgba(45,182,200,0.18) 100%);
}
.msf__choice-media--alt {
background: linear-gradient(160deg, rgba(132,176,236,0.34) 0%, rgba(120,158,224,0.18) 100%);
}
/* Personen-Bild ragt oben aus der Kachel (wie Safest) */
.msf__choice-img {
display: block;
height: 176px;
width: auto;
max-width: 100%;
object-fit: contain;
pointer-events: none;
}
.msf__choice-foot {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 14px;
}
.msf__choice-radio {
width: 20px; height: 20px;
flex: 0 0 auto;
border-radius: 50%;
border: 2px solid rgba(20,41,70,0.25);
transition: border-color .2s ease, background .2s ease !important;
}
.msf__choice.is-selected .msf__choice-radio {
border-color: var(--accent);
background: var(--accent);
box-shadow: inset 0 0 0 3px #FFFFFF;
}
.msf__choice-label {
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--navy);
}
.msf__proof {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0 auto;
max-width: none;
font-family: "Switzer", sans-serif;
font-size: 12.5px;
line-height: 1.45;
color: #6B7686;
text-align: center;
}
.msf__proof strong { color: var(--navy); font-weight: 600; }
.msf__proof-icon { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
/* ---- Eyebrow-Pills: Türkis auf den dunkleren Button-Ton bringen ---- */
.eyebrow { color: #136B79; }
.eyebrow::before {
background: radial-gradient(100% 100% at 32% 28%, #29B1C2 0%, var(--accent) 55%, var(--accent-deep) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.4),
0 0 6px rgba(23,130,147,0.45);
}
/* ===========================================================
Dekorative Glas-Scherben: dezent halb aus den Rändern ragend
=========================================================== */
.split { position: relative; }
#modell, #ueber-uns, #faq {
position: relative;
z-index: 0; /* eigener Stacking-Context: Scherbe (z-index:-1) liegt über dem Section-BG, hinter dem Content */
overflow: hidden; /* klippt den über den Viewport ragenden Teil */
}
.deco-shard {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 480px;
z-index: -1;
opacity: 0.2;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.deco-shard--right { right: calc((100% - 100vw) / 2 - 240px); }
.deco-shard--left { left: calc((100% - 100vw) / 2 - 240px); }
@media (max-width: 700px) {
.deco-shard { display: none; }
}
/* Echtes Foto füllt die Platzhalter-Kachel randvoll */
.split__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ===========================================================
Headline-Harmonisierung: eine Section-Headline-Größe
unterhalb des Hero (Hero-H1 bleibt mit 44px die größte)
=========================================================== */
.h2 {
font-size: clamp(38px, 4.4vw, 56px);
line-height: 1.12;
}
.about__text .h2,
.faq-intro .h2 {
font-size: clamp(34px, 4vw, 50px);
}
/* Zickzack-Blocktitel eine klare Stufe unter der Section-Headline */
.split__text .h3 {
font-size: clamp(23px, 2.3vw, 29px);
}
/* Fließtext der Zickzack-Blöcke: größer, luftiger, mit Absätzen */
.split__text .body {
font-size: clamp(16px, 1.45vw, 19px);
line-height: 1.7;
}
.split__text .body + .body { margin-top: 14px; }
/* ===========================================================
Illustrations-Karten: glasige Fläche, weicher Schub-Schatten
und ein dezenter Leucht-Lauf am Rand (Pill-Farbwelt)
=========================================================== */
@property --shine-angle {
syntax: "
";
initial-value: 0deg;
inherits: false;
}
.split__media--photo {
overflow: visible;
isolation: isolate;
background:
linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 100%);
border: 1px solid rgba(255,255,255,0.85);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
0 30px 60px -28px rgba(20,41,70,0.30),
0 10px 22px -14px rgba(20,41,70,0.16);
}
.split__media--photo .split__img {
border-radius: inherit;
z-index: 1;
}
/* feiner Licht-Ring — NUR bei den Modell-Karten.
Statisch statt rotierend: die animierte conic-Rotation musste den Verlauf
auf jedem Frame neu zeichnen (Paint, nicht Compositing) und war auf
schwächeren Geräten eine spürbare Ruckelquelle. */
#modell .split__media--photo::before,
#modell .split__media--photo::after {
content: "";
position: absolute;
inset: -2px;
border-radius: calc(var(--radius-card-lg) + 2px);
background: conic-gradient(
from 40deg,
rgba(31,169,185,0) 0deg,
rgba(31,169,185,0) 268deg,
rgba(150,190,235,0.65) 306deg,
rgba(56,195,211,0.95) 330deg,
rgba(140,216,196,0.7) 348deg,
rgba(31,169,185,0) 360deg
);
z-index: -1;
pointer-events: none;
}
/* zweite Lage als weiches Leuchten */
#modell .split__media--photo::after {
inset: -3px;
filter: blur(9px);
opacity: 0.55;
}
@keyframes shine-rotate {
to { --shine-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.split__media--photo::before,
.split__media--photo::after { animation: none !important; }
}
/* Ganz dezentes Schweben der drei Modell-Karten, phasenversetzt.
Nutzt die separate translate-Eigenschaft, weil .reveal
transform per !important auf none zwingt. */
@keyframes card-float {
0%, 100% { translate: 0 3px; }
50% { translate: 0 -3px; }
}
#modell .split__media--photo {
animation: card-float 7s ease-in-out infinite !important;
}
#modell .split:nth-child(2) .split__media--photo { animation-delay: -2.3s !important; }
#modell .split:nth-child(3) .split__media--photo { animation-delay: -4.6s !important; }
@media (prefers-reduced-motion: reduce) {
#modell .split__media--photo { animation: none !important; }
}
/* Über-uns-Karte: nur weicher Schatten, kein Licht-Ring, keine Tönung */
.about__media--photo {
border: 0;
background: #E7ECF2;
box-shadow:
0 30px 60px -28px rgba(20,41,70,0.30),
0 10px 22px -14px rgba(20,41,70,0.16);
}
/* Foto füllt die volle Höhe der Textspalte (Pill bis letzter Satz) */
@media (min-width: 901px) {
.about__media--photo {
aspect-ratio: auto;
height: 100%;
}
}
/* ===========================================================
Angebot-Karten: weißes Panel statt Dunkelblau (wie der
Beratungshaus-Block), weicher Schub-Schatten wie im Modell
=========================================================== */
.ocard__panel,
.ocards .ocard:nth-child(1) .ocard__panel,
.ocards .ocard:nth-child(2) .ocard__panel,
.ocards .ocard:nth-child(3) .ocard__panel {
background: #FFFFFF;
color: var(--text-body);
}
.ocard__panel::after,
.ocards .ocard:nth-child(1) .ocard__panel::after,
.ocards .ocard:nth-child(2) .ocard__panel::after,
.ocards .ocard:nth-child(3) .ocard__panel::after {
content: none;
}
.ocard__title { color: var(--navy); }
.ocard__body { color: var(--text-body); }
/* Einheitliche Fließtext-Größe überall (Referenz: Modell-Texte,
clamp 16-19px wie "Wir schulen in einem vollständigen ...") */
.ocard__body,
.consulting__body,
.step__body,
.faq__answer p,
.tcard__body,
.footer__desc,
.footer__trainer-text,
.about__text .body,
.about__text p.body,
.card__body {
font-size: clamp(16px, 1.45vw, 19px);
line-height: 1.65;
}
/* FAQ-Fragen mindestens so groß wie die Antworten */
.faq__summary {
font-size: clamp(16px, 1.45vw, 19px);
}
/* Hero-Bullets auf die einheitliche Fließtext-Größe */
.hero__bullet {
font-size: clamp(16px, 1.3vw, 18px);
}
/* Mehr Luft zwischen Angebot-Karten und Beratungshaus-Block */
.consulting {
margin-top: 88px;
position: relative;
}
/* NEU!-Badge: teal Sticker im Illustrations-Look, fliegt beim
Scroll-Reveal ins obere rechte Eck der Beratungshaus-Karte */
.consulting__badge {
position: absolute;
top: 18px;
right: 20px;
z-index: 3;
font-family: "Switzer", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: clamp(15px, 1.3vw, 19px);
letter-spacing: 0.05em;
color: #FFFFFF;
padding: 9px 18px 10px;
border-radius: 12px;
background:
linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 52%),
radial-gradient(120% 120% at 30% 25%, #45C9D5 0%, #29B1C2 55%, #178293 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
0 12px 26px -10px rgba(23,130,147,0.55);
opacity: 0;
translate: 80px -80px;
rotate: 14deg;
pointer-events: none;
}
.consulting.is-visible .consulting__badge {
animation: badge-fly 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards !important;
}
@keyframes badge-fly {
0% { opacity: 0; translate: 80px -80px; rotate: 14deg; }
70% { opacity: 1; translate: -4px 3px; rotate: -9deg; }
100% { opacity: 1; translate: 0 0; rotate: -6deg; }
}
@media (prefers-reduced-motion: reduce) {
.consulting__badge { opacity: 1; translate: 0 0; rotate: -6deg; }
.consulting.is-visible .consulting__badge { animation: none !important; }
}
@media (max-width: 760px) {
.consulting__badge { top: 12px; right: 12px; }
}
/* Keine fetten Hervorhebungen in Fließtexten: alles normal dünn */
.body strong,
.lead strong,
.ocard__body strong,
.consulting__body strong,
.step__body strong,
.faq__answer strong,
.finalcta__sub strong,
.footer__desc strong,
.tcard__body strong,
.about__text .body strong,
.split__text .body strong {
font-weight: inherit !important;
color: inherit !important;
}
.ocard {
border: 1px solid var(--glass-border);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
0 30px 60px -28px rgba(20,41,70,0.30),
0 10px 22px -14px rgba(20,41,70,0.16);
}
/* ===========================================================
Clean-Pass: Glas-Kristalle aus, dezente SW-Texturen in den
weißen Sections (rechts sichtbar, links weißer Verlauf)
=========================================================== */
.deco-shard, .section__orna { display: none !important; }
.section { position: relative; }
.section > .container { position: relative; z-index: 1; }
/* ===========================================================
Großstadt-Hintergründe (Schwarzweiß-Drohnenaufnahmen)
ab Modell abwärts. Pro Section eine Stadt, abwechselnd
rechts/links sichtbar, weich in die Section-Farbe und damit
sauber hinter den Wellen-Dividern ausfadend. Parallax nur
im Modell.
=========================================================== */
.citybg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
/* Maske: horizontal auf eine Seite, vertikal oben/unten weich aus,
damit nie eine Kante zum Divider entsteht */
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.citybg__img {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: cover;
/* kein CSS-Filter: die Stadtbilder sind bereits Schwarzweiß-Assets (…-sw.webp);
ein grayscale-Filter auf großen Parallax-Layern kostet nur Renderzeit */
opacity: var(--cityop, 0.09);
will-change: transform;
}
/* Bild rechts sichtbar, fadet weit nach links aus; vertikal sehr weich,
damit es schon an der Section-Kante bei Alpha 0 steht und ohne Kante
hinter den Wellen-Dividern verläuft */
.citybg--right {
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, transparent 56%, rgba(0,0,0,0.42) 80%, #000 100%),
linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
mask-image:
linear-gradient(90deg, transparent 0%, transparent 56%, rgba(0,0,0,0.42) 80%, #000 100%),
linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.citybg--right .citybg__img { background-position: center right; }
/* Bild links sichtbar, fadet weit nach rechts aus */
.citybg--left {
-webkit-mask-image:
linear-gradient(270deg, transparent 0%, transparent 56%, rgba(0,0,0,0.42) 80%, #000 100%),
linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
mask-image:
linear-gradient(270deg, transparent 0%, transparent 56%, rgba(0,0,0,0.42) 80%, #000 100%),
linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.citybg--left .citybg__img { background-position: center left; }
/* Parallax: Innen-Layer höher als der Rahmen, JS verschiebt translateY */
.citybg--parallax .citybg__img {
top: -18%;
height: 136%;
}
@media (max-width: 900px) {
.citybg__img { opacity: 0.06; }
/* Auf Mobile keinen Parallax-Versatz, Layer wieder bündig */
.citybg--parallax .citybg__img { top: 0; height: 100%; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.citybg--parallax .citybg__img { transform: none !important; }
}
/* ===========================================================
Echte Fotos in Angebot-, Beratungshaus-, Über-uns- und
FAQ-Kacheln (füllen die Fläche randvoll, Platzhalter aus)
=========================================================== */
.ocard__media { position: relative; overflow: hidden; border-bottom: 0; }
.ocard__img,
.consulting__img,
.about__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.consulting__media { position: relative; overflow: hidden; border-right: 0; }
/* Geschmeidiger weißer Übergang vom Bild ins weiße Panel */
.ocard__media::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 42%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 60%, #FFFFFF 100%);
pointer-events: none;
z-index: 2;
}
/* Beratungshaus: Bild links, weißer Verlauf läuft nach links in den Text */
.consulting__media::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -1px;
width: 38%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 60%, #FFFFFF 100%);
pointer-events: none;
z-index: 2;
}
@media (max-width: 760px) {
.consulting__media { border-bottom: 0; }
.consulting__media::after {
top: auto;
left: 0;
right: 0;
bottom: -1px;
width: auto;
height: 42%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 60%, #FFFFFF 100%);
}
}
.about__media--photo::after { content: none; }
.faq-intro__media.split__media--photo { min-height: 260px; }
@media (max-width: 980px) {
.faq-intro__media.split__media--photo { aspect-ratio: 4 / 3; min-height: 0; }
}
/* ===========================================================
Unterseite /trainings — Kopf, breite Trainings-Karten, CTA
=========================================================== */
.tpage-head {
padding-top: clamp(140px, 18vh, 190px);
padding-bottom: 12px;
}
.tpage-head .section-head { margin-bottom: 0; }
.tpage-list { padding-top: 28px; }
.tcards {
display: flex;
flex-direction: column;
gap: 22px;
max-width: 880px;
margin: 0 auto;
}
.tcard {
display: grid;
grid-template-columns: 240px 1fr;
gap: 28px;
align-items: start;
padding: 34px 36px;
border-radius: 16px;
background: #FFFFFF;
border: 1px solid var(--glass-border);
box-shadow:
0 1px 0 rgba(255,255,255,0.7),
0 20px 44px -24px rgba(20,41,70,0.18),
0 8px 18px -14px rgba(20,41,70,0.12);
transition: border-color .25s var(--reveal-ease), box-shadow .25s var(--reveal-ease);
}
.tcard:hover {
border-color: rgba(31,169,185,0.4);
box-shadow:
0 24px 50px -22px rgba(20,41,70,0.22),
0 0 0 1px rgba(31,169,185,0.16);
}
.tcard__head { display: flex; flex-direction: column; gap: 14px; }
.tcard__head .eyebrow { width: fit-content; }
.tcard__title {
margin: 0;
font-size: clamp(20px, 1.9vw, 24px);
font-weight: 600;
line-height: 1.22;
letter-spacing: -0.01em;
color: var(--navy);
text-wrap: balance;
}
.tcard__body {
margin: 0;
font-size: clamp(15px, 1.25vw, 17px);
line-height: 1.65;
color: var(--text-body);
}
.tcard__pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.tpage-note {
max-width: 880px;
margin: 30px auto 0;
font-size: clamp(15px, 1.25vw, 17px);
line-height: 1.6;
color: var(--text-quiet);
text-align: center;
text-wrap: balance;
}
.tpage-cta .finalcta {
text-align: center;
max-width: 760px;
margin: 0 auto;
}
@media (max-width: 760px) {
.tpage-head { padding-top: 120px; }
.tcard {
grid-template-columns: 1fr;
gap: 16px;
padding: 26px 22px;
}
}
/* ===========================================================
Unterseite "Häufige Trainings" — Hero (Cityscape) + Profile
=========================================================== */
/* Durchgehend weißer oberer Block (Hero + Profile), City als Parallax dahinter */
.tpage-top {
position: relative;
background: #FFFFFF;
padding-top: clamp(150px, 20vh, 210px);
padding-bottom: clamp(48px, 7vh, 90px);
overflow: hidden;
}
.tpage-top .container { position: relative; z-index: 2; }
.tpage-top__head {
max-width: 780px;
margin: 0 auto clamp(38px, 5vh, 64px);
text-align: center;
}
.tpage-top__head .lead { margin-left: auto; margin-right: auto; }
/* Hero-Top der Unterseite: Stadt oben rechts, weich verblurrt, blendet nach unten/links aus */
.citybg--herotop {
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0,0,0,0.55) 66%, #000 100%),
linear-gradient(180deg, #000 0%, #000 18%, rgba(0,0,0,0.45) 48%, transparent 74%);
mask-image:
linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0,0,0,0.55) 66%, #000 100%),
linear-gradient(180deg, #000 0%, #000 18%, rgba(0,0,0,0.45) 48%, transparent 74%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.citybg--herotop .citybg__img {
background-position: top right;
/* blur(3px) entfernt: teurer Dauer-Filter auf großem Parallax-Layer;
die weiche Wirkung übernimmt die etwas niedrigere Deckkraft */
opacity: calc(var(--cityop, 0.09) * 0.82);
}
/* CTA hebt sich nur ganz leicht graulich von der weissen Passage darueber ab */
.section--final-cta.tcta { background: #F3F5F8; }
/* Kleiner Vertrauens-Hinweis unter dem CTA-Button */
.finalcta__note {
margin: 16px 0 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--text-quiet);
}
/* -----------------------------------------------------------
Anfrage-Formular im Hero: Sprungziel + kurzer "Stups"
----------------------------------------------------------- */
#anfrage { scroll-margin-top: 100px; }
@keyframes form-nudge {
0% { transform: translateY(0); }
28% { transform: translateY(-12px); }
55% { transform: translateY(0); }
74% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}
.msf.nudge { animation: form-nudge 1s cubic-bezier(0.22, 1, 0.36, 1); }
/* -----------------------------------------------------------
Scroll-to-Top Button (edel, türkis, unten rechts)
----------------------------------------------------------- */
.to-top {
position: fixed;
right: clamp(16px, 3vw, 30px);
bottom: clamp(16px, 3vw, 30px);
z-index: 80;
width: 50px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(255,255,255,0.45);
cursor: pointer;
border-radius: 50%;
color: #FFFFFF;
background: linear-gradient(150deg, var(--accent-bright) 0%, var(--accent) 55%, var(--accent-deep) 100%);
box-shadow:
0 12px 28px -8px rgba(31,169,185,0.55),
inset 0 1px 0 rgba(255,255,255,0.5);
opacity: 0;
visibility: hidden;
transform: translateY(14px) scale(0.92);
transition: opacity .35s var(--reveal-ease), transform .35s var(--reveal-ease), box-shadow .25s var(--reveal-ease), visibility .35s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover {
transform: translateY(-3px);
box-shadow:
0 18px 34px -8px rgba(31,169,185,0.65),
inset 0 1px 0 rgba(255,255,255,0.6);
}
.to-top:active { transform: translateY(-1px) scale(0.97); }
.to-top svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) {
.msf.nudge { animation: none; }
.to-top { transition: opacity .2s linear, visibility .2s; transform: none; }
.to-top.is-visible { transform: none; }
}
.tcases {
display: flex;
flex-direction: column;
gap: 26px;
max-width: 1040px;
margin: 0 auto;
}
.tcase {
position: relative;
border-radius: var(--radius-card-lg);
background: #FFFFFF;
border: 1px solid var(--glass-border);
box-shadow:
0 1px 0 rgba(255,255,255,0.7),
0 26px 54px -30px rgba(20,41,70,0.22),
0 10px 22px -16px rgba(20,41,70,0.12);
padding: clamp(26px, 3vw, 46px);
transition: border-color .25s var(--reveal-ease), box-shadow .3s var(--reveal-ease), transform .4s var(--reveal-ease);
}
.tcase:hover {
transform: translateY(-4px);
border-color: rgba(31,169,185,0.4);
box-shadow:
0 34px 62px -30px rgba(20,41,70,0.26),
0 0 0 1px rgba(31,169,185,0.14),
0 0 44px -10px rgba(43,182,201,0.28);
}
.tcase__head { margin-bottom: 20px; }
.tcase__head .eyebrow { width: fit-content; margin: 0; }
.tcase__title {
margin: 14px 0 0;
font-size: clamp(23px, 2.5vw, 32px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.14;
color: var(--navy);
}
.tcase__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.tcase__intro {
margin: 0 0 22px;
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.62;
color: var(--text-body);
max-width: 74ch;
}
.tcase__topics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 40px;
}
.tcase__topics--wide { grid-template-columns: 1fr; }
.ttopic {
padding: 15px 0;
border-top: 1px solid var(--glass-border);
}
.ttopic__title {
display: flex;
gap: 11px;
margin: 0;
font-size: 16.5px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--navy);
}
.ttopic__title::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
margin-top: 7px;
border-radius: 3px;
background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
box-shadow: 0 0 0 3px rgba(31,169,185,0.12);
}
.ttopic__scope {
margin: 6px 0 0 19px;
font-size: 14px;
line-height: 1.55;
color: var(--text-body);
}
@media (max-width: 760px) {
.tcase__topics { grid-template-columns: 1fr; }
}
/* Nav: normale Toolbar (Pill-Experiment zurückgebaut) */
/* =========================================================================
MOBILE & TABLET — angehängt, damit es in der Kaskade gewinnt.
ALLES in Media-Queries: Desktop (>900px) bleibt 100% unverändert.
========================================================================= */
.br-m { display: none; }
@media (max-width: 900px) {
/* ---- Header: oben nur Logo + Glas-Burger ---- */
.nav { z-index: 130; }
/* Wenn das Menü offen ist: Filter/Hintergrund weg, damit das fixe Overlay
den ganzen Viewport bedeckt (backdrop-filter kappt sonst position:fixed) */
.nav.is-open {
background: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.nav__inner { grid-template-columns: auto 1fr auto; padding: 0 14px 0 18px; position: relative; z-index: 96; }
.nav__cta { display: none; }
.nav__links { display: none; }
.nav__logo-text { white-space: nowrap; }
/* Toggle: "Menü ☰" als Milchglas-Pille mit türkisem Schimmer */
.nav__burger {
display: inline-flex;
align-items: center;
gap: 10px;
justify-self: end;
width: auto;
height: 44px;
padding: 0 15px;
border-radius: 13px;
font-family: "Switzer", sans-serif;
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--navy);
background: linear-gradient(135deg, rgba(255,255,255,0.66) 0%, rgba(232,248,250,0.5) 100%);
-webkit-backdrop-filter: blur(16px) saturate(1.7);
backdrop-filter: blur(16px) saturate(1.7);
border: 1px solid rgba(255,255,255,0.6);
box-shadow: 0 12px 28px -12px rgba(20,41,70,0.24), 0 0 20px -3px rgba(31,169,185,0.3), inset 0 1px 0 rgba(255,255,255,0.9);
}
.nav__burger:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(31,169,185,0.3), 0 12px 28px -12px rgba(20,41,70,0.24), 0 0 20px -3px rgba(31,169,185,0.3);
}
/* ---- Overlay-Menü: frosted glass, türkise Trennstriche, gestaffelt ---- */
.nav__overlay {
display: block;
visibility: hidden;
opacity: 0;
pointer-events: none;
overflow-y: auto;
padding: calc(var(--nav-h) + 26px) 22px 36px;
/* Frosted Glass: Hintergrund bleibt sichtbar, nur leicht verschwommen */
background: rgba(255,255,255,0.45);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
}
.nav.is-open .nav__overlay { visibility: visible; opacity: 1; pointer-events: auto; }
.nav__overlay ul { gap: 0; }
.nav__overlay li { position: relative; }
.nav__overlay li:not(:last-child)::after {
content: "";
position: absolute;
left: 8px; right: 8px; bottom: 0;
height: 1px;
background: linear-gradient(90deg, rgba(31,169,185,0) 0%, rgba(31,169,185,0.5) 50%, rgba(31,169,185,0) 100%);
}
.nav__overlay li a {
display: block;
padding: 19px 8px;
font-size: 19px;
font-weight: 600;
color: var(--navy);
background: transparent;
border: none;
border-radius: 0;
}
/* CTA im Menü sichtbar lassen (Navy-Pille) */
.nav__overlay .btn--primary { background: var(--navy); color: #FFFFFF; }
.nav__overlay .btn {
width: 100%;
justify-content: center;
margin-top: 26px;
height: 54px;
}
/* Öffnen/Schließen wird per GSAP animiert (siehe app.js); CSS hält nur den
No-JS/Reduced-Motion-Fallback über .nav.is-open .nav__overlay */
/* ---- Hero: ATF weiß lassen, Kristalle nur dezent (Lesbarkeit) ---- */
.hero__bg { opacity: 0.3; }
.hero::before {
background: linear-gradient(180deg,
rgba(238,240,244,0.96) 0%,
rgba(238,240,244,0.86) 38%,
rgba(238,240,244,0.60) 70%,
rgba(238,240,244,0.42) 100%);
}
/* ---- Angebot-Headline: "zu arbeiten" zusammenhalten ---- */
.ang-pair { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
.nav__overlay,
.nav__overlay li,
.nav__overlay > .btn { transition: opacity .2s linear, visibility .2s linear; transform: none; }
}
@media (max-width: 600px) {
/* ---- Modell-Subline: "Sicherheit" noch in Zeile 1 ---- */
.br-m { display: inline; }
.lead--mod { font-size: 15px; }
/* ---- Hero-Auswahlkacheln: Personen nicht über die Kante, Label sauber ---- */
.msf__choices { gap: 10px; }
.msf__choice-media { height: 118px; overflow: hidden; }
.msf__choice-img { height: 118px; object-fit: contain; object-position: center bottom; }
/* Radio über dem Label zentriert -> Label nutzt die volle Kachelbreite (max. 2 Zeilen) */
.msf__choice-foot { flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 11px 8px 14px; }
.msf__choice-label { font-size: 13px; line-height: 1.22; }
.msf__choice-radio { width: 18px; height: 18px; }
}
/* ===========================================================
Korrektur-Runde Juli 2026: neue Copy (Martin) + Feinschliff
=========================================================== */
/* Echtes Logo statt Text-Platzhalter: hell auf weißen Flächen (Nav),
dunkel auf Navy (Footer). Quelle 900x250, Höhe steuert die Größe. */
.nav__logo-img {
height: 56px;
width: auto;
display: block;
}
.footer__logo-img {
height: 64px;
width: auto;
display: block;
}
@media (max-width: 380px) {
.nav__logo-img { height: 44px; }
}
/* ===========================================================
Rechtsseiten (Impressum, Datenschutz): ruhige, lesbare Prosa
=========================================================== */
.legal {
background: #FFFFFF;
padding: clamp(118px, 15vh, 176px) var(--section-pad-x) clamp(64px, 9vh, 104px);
}
.legal__inner {
max-width: 800px;
margin: 0 auto;
}
.legal__inner .eyebrow { margin-bottom: 24px; }
.legal__inner h1 {
margin: 0 0 10px;
font-size: clamp(34px, 4.4vw, 52px);
line-height: 1.12;
letter-spacing: -0.03em;
font-weight: 600;
color: var(--navy);
}
.legal__updated {
margin: 0 0 clamp(36px, 5vh, 56px);
font-size: 14px;
color: var(--text-quiet);
}
.legal__inner h2 {
margin: clamp(36px, 5vh, 52px) 0 14px;
font-size: clamp(20px, 2.1vw, 26px);
line-height: 1.25;
letter-spacing: -0.02em;
font-weight: 600;
color: var(--navy);
}
.legal__inner h3 {
margin: 26px 0 8px;
font-size: clamp(16px, 1.5vw, 18px);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--navy);
}
.legal__inner p,
.legal__inner li {
font-size: clamp(15px, 1.15vw, 16.5px);
line-height: 1.7;
color: var(--text-body);
}
.legal__inner p { margin: 0 0 14px; max-width: 68ch; }
.legal__inner ul { margin: 0 0 14px; padding-left: 22px; }
.legal__inner li { margin-bottom: 6px; }
.legal__inner a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal__inner a:hover { color: var(--accent); }
.legal__inner strong { color: var(--navy); font-weight: 600; }
.legal__addr {
margin: 0 0 14px;
font-style: normal;
line-height: 1.7;
color: var(--text-body);
font-size: clamp(15px, 1.15vw, 16.5px);
}
/* Platzhalter-Hinweis (nur zur internen Kennzeichnung, dezent gelblich) */
.legal__todo {
display: block;
margin: 6px 0 14px;
padding: 12px 16px;
border-radius: 10px;
background: rgba(214, 158, 46, 0.10);
border: 1px solid rgba(214, 158, 46, 0.30);
color: #8a6d1f;
font-size: 14px;
line-height: 1.55;
}
.legal__hr {
border: none;
border-top: 1px solid var(--glass-border);
margin: clamp(40px, 5vh, 56px) 0;
}
/* Über uns: zusammenfassender Schluss-Satz als ruhiges Akzent-Panel */
.about__text .about__summary {
margin-top: 26px;
padding: 18px 22px;
border-radius: 14px;
background: var(--accent-faint);
border: 1px solid rgba(31,169,185,0.20);
color: var(--text-caption);
font-weight: 500;
}
/* Hero-Subline: der längere Text braucht etwas mehr Zeilenbreite;
einen Tick kleiner, damit sie im Header auf drei Zeilen läuft */
.hero__inner--split .hero__sub {
max-width: 560px;
font-size: clamp(17px, 1.32vw, 19px);
}
/* Hero-Headline: dezenter Marker unter "SAP S/4HANA" (größere Fläche,
deshalb etwas flacher und transparenter als in den Section-Headlines) */
.hero__title .hl-mark::before {
height: 0.34em;
bottom: 0.06em;
background: linear-gradient(90deg, rgba(31,169,185,0.16) 0%, rgba(95,224,240,0.18) 50%, rgba(31,169,185,0.16) 100%);
}
/* Über uns: Martin sitzt mittig im Bildausschnitt */
.about__img { object-position: 36% center; }
/* Über uns: Marker beginnt bündig am "T" von "Trosits",
nicht im Leerzeichen davor */
#ueber-headline .hl-mark::before { left: 0; }
/* FAQ: Bild streckt sich, bis es mit der Unterkante der letzten
Frage-Kachel rechts abschließt */
@media (min-width: 901px) {
.faq-layout { align-items: stretch; }
.faq-intro { height: 100%; }
.faq-intro__media.split__media--photo {
flex: 1 1 auto;
aspect-ratio: auto;
min-height: 260px;
}
.faq-intro__media .split__img { object-position: 28% center; }
}
/* Lange Trainingstitel auf der Unterseite ausgewogen umbrechen */
.tcase__title { text-wrap: balance; }
/* Footer: das längere Button-Label bleibt auf schmalen Screens sauber */
@media (max-width: 560px) {
.footer__trainer-btn {
width: 100%;
justify-content: space-between;
height: auto;
min-height: 54px;
padding: 9px 7px 9px 20px;
white-space: normal;
text-align: left;
}
.footer__trainer-label { flex: 1 1 auto; line-height: 1.3; }
}
/* Mobile: Blur der Hero-Glaskarte reduzieren. Sie ist die größte
Glasfläche im sichtbaren Bereich; blur(24px) war dort der teuerste
einzelne Render-Posten beim Laden und Scrollen. */
@media (max-width: 700px) {
.msf {
-webkit-backdrop-filter: blur(12px) saturate(1.35);
backdrop-filter: blur(12px) saturate(1.35);
}
}
@media (max-width: 380px) {
.nav__logo-text { font-size: 20px; }
}