.mfw-editorial-keystatement-opener{
–mfw-editorial-ink:#1A192E;
–mfw-editorial-text:#575965;
–mfw-editorial-muted:#748EAE;
–mfw-editorial-blue:#58ABDD;
–mfw-editorial-aqua:#AED2D6;
–mfw-editorial-orange:#D88A3A;
–mfw-editorial-surface:#FFFFFF;
–mfw-editorial-surface-soft:#F7FBFC;
–mfw-editorial-surface-blue:#F3F9FB;
–mfw-editorial-surface-blue-strong:#EAF4F7;
–mfw-editorial-radius:20px;
box-sizing:border-box;
max-width:820px;
margin:2.5rem auto 3rem;
padding:clamp(2.2rem,5vw,3.6rem) clamp(1.4rem,4vw,3rem);
background:
radial-gradient(ellipse at 15% 0%, var(–mfw-editorial-surface-blue-strong) 0%, rgba(234,244,247,0) 55%),
linear-gradient(180deg, var(–mfw-editorial-surface) 0%, var(–mfw-editorial-surface-soft) 100%);
border:1px solid rgba(174,210,214,0.35);
border-radius:var(–mfw-editorial-radius);
font-family:inherit;
-webkit-font-smoothing:antialiased;
}
.mfw-editorial-keystatement-opener *{box-sizing:border-box;}
.mfw-editorial-keystatement-opener .mfw-editorial-keystatement-eyebrow{
display:inline-flex;
align-items:center;
gap:.6rem;
margin:0 0 clamp(1.4rem,3vw,2rem);
font-size:.78rem;
font-weight:700;
letter-spacing:.2em;
text-transform:uppercase;
color:var(–mfw-editorial-blue);
}
.mfw-editorial-keystatement-opener .mfw-editorial-keystatement-eyebrow::before{
content:““;
width:28px;
height:1px;
background:var(–mfw-editorial-blue);
opacity:.7;
}
.mfw-editorial-keystatement-opener .mfw-editorial-keystatement-lines{
list-style:none;
margin:0;
padding:0;
counter-reset:none;
}
.mfw-editorial-keystatement-opener .mfw-editorial-keystatement-lines li{
font-size:clamp(2.3rem,6.5vw,4.2rem);
line-height:1.04;
letter-spacing:-0.03em;
font-weight:700;
color:var(–mfw-editorial-ink);
margin:0;
}
.mfw-editorial-keystatement-opener .mfw-editorial-keystatement-lines li + li{
margin-top:.15em;
}
/* zweite Zeile zurückgenommen – ruhiger Rhythmus */
.mfw-editorial-keystatement-opener .mfw-editorial-keystatement-lines li:nth-child(2){
color:var(–mfw-editorial-muted);
font-weight:600;
}
/* „Fertig?“ als pointierter Akzent */
.mfw-editorial-keystatement-opener .mfw-editorial-keystatement-lines li:last-child{
color:var(–mfw-editorial-orange);
}
.mfw-editorial-keystatement-opener .mfw-editorial-keystatement-rule{
height:1px;
border:0;
margin:clamp(1.8rem,4vw,2.6rem) 0 0;
background:linear-gradient(90deg, rgba(88,171,221,0.35) 0%, rgba(174,210,214,0.35) 45%, rgba(174,210,214,0) 100%);
}
@media (max-width:600px){
.mfw-editorial-keystatement-opener{
margin:1.75rem auto 2.25rem;
}
}
Zum Einstieg
Ein Artikel ist geschrieben.
Veröffentlicht.
Fertig?
Vielleicht war das einmal so.
Heute wird diese Vorstellung zunehmend unpraktisch.
.mfw-editorial-statement-shift{
–mfw-editorial-ink:#1A192E;
–mfw-editorial-text:#575965;
–mfw-editorial-muted:#748EAE;
–mfw-editorial-blue:#58ABDD;
–mfw-editorial-aqua:#AED2D6;
–mfw-editorial-orange:#D88A3A;
–mfw-editorial-surface:#FFFFFF;
–mfw-editorial-surface-soft:#F7FBFC;
–mfw-editorial-surface-blue:#F3F9FB;
–mfw-editorial-surface-blue-strong:#EAF4F7;
–mfw-editorial-radius:20px;
box-sizing:border-box;
max-width:860px;
margin:2.75rem auto 3.25rem;
padding:clamp(2.4rem,5.5vw,4rem) clamp(1.5rem,4vw,3.4rem);
background:
radial-gradient(ellipse at 100% 0%, var(–mfw-editorial-surface-blue-strong) 0%, rgba(234,244,247,0) 55%),
linear-gradient(180deg, var(–mfw-editorial-surface) 0%, var(–mfw-editorial-surface-blue) 100%);
border:1px solid rgba(174,210,214,0.35);
border-radius:var(–mfw-editorial-radius);
font-family:inherit;
-webkit-font-smoothing:antialiased;
}
.mfw-editorial-statement-shift *{box-sizing:border-box;}
.mfw-editorial-statement-shift .mfw-editorial-statement-lead{
max-width:640px;
margin:0 0 clamp(1.4rem,3vw,2rem);
font-size:clamp(1.02rem,2.2vw,1.2rem);
line-height:1.6;
color:var(–mfw-editorial-text);
}
.mfw-editorial-statement-shift .mfw-editorial-statement-bridge{
display:inline-flex;
align-items:center;
gap:.7rem;
margin:0 0 clamp(1rem,2.4vw,1.5rem);
font-size:.8rem;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
color:var(–mfw-editorial-blue);
}
.mfw-editorial-statement-shift .mfw-editorial-statement-bridge::before{
content:““;
width:30px;
height:1px;
background:var(–mfw-editorial-blue);
opacity:.7;
}
.mfw-editorial-statement-shift .mfw-editorial-statement-headline{
margin:0;
font-size:clamp(2.1rem,5.6vw,3.6rem);
line-height:1.06;
letter-spacing:-0.03em;
font-weight:700;
color:var(–mfw-editorial-ink);
}
.mfw-editorial-statement-shift .mfw-editorial-statement-headline em{
font-style:normal;
color:var(–mfw-editorial-orange);
}
@media (max-width:600px){
.mfw-editorial-statement-shift{
margin:1.9rem auto 2.4rem;
}
}
Denn während wir noch darüber nachdenken, wie wir den nächsten Artikel besser machen, verändert sich gerade etwas Grundsätzlicheres:
Die eigentliche Verschiebung
Die Art, wie Menschen überhaupt zu Informationen kommen.
Sie möchten den ganzen Artikel lesen, aber haben noch keinen Zugang?
Ihr Kontakt im Produktmanagement hilft Ihnen gerne weiter und sorgt für einen schnellen Zugang zum Expertenbereich
