<aside class="toc">
<h3 class="toc__heading">Inhalt</h3>
<ol class="toc__list">
<li><a class="toc__anchor" href="#dilemma">Das Dilemma: Innovation vs. Chaos</a>
</li>
<li><a class="toc__anchor" href="#idee">Die Idee hinter Innovation Tokens</a>
</li>
<li><a class="toc__anchor" href="#unbekannt">An die unbekannten Unbekannten denken</a>
</li>
<li><a class="toc__anchor" href="#ballast">Kognitiven Ballast vermeiden</a>
</li>
<li><a class="toc__anchor" href="#fokus">Fokus auf die Wertschöpfung legen</a>
</li>
<li><a class="toc__anchor" href="#fazit">Fazit</a>
</li>
</ol>
</aside>
<aside class="toc">
<h3 class="toc__heading">Inhalt</h3>
<ol class="toc__list">
<li><a class="toc__anchor" href="#dilemma">Das Dilemma: Innovation vs. Chaos</a></li>
<li><a class="toc__anchor" href="#idee">Die Idee hinter Innovation Tokens</a></li>
<li><a class="toc__anchor" href="#unbekannt">An die unbekannten Unbekannten denken</a></li>
<li><a class="toc__anchor" href="#ballast">Kognitiven Ballast vermeiden</a></li>
<li><a class="toc__anchor" href="#fokus">Fokus auf die Wertschöpfung legen</a></li>
<li><a class="toc__anchor" href="#fazit">Fazit</a></li>
</ol>
</aside>
/* No context defined for this component. */
$anchor-list-font-size: 1.26rem; // Determined by the hard science of pushing things around
.toc {
margin-bottom: $spacer-lg;
max-width: 100%;
}
.toc__heading {
@extend %heading-font-heavy;
margin-bottom: $spacer-sm;
text-transform: uppercase;
line-height: $toc-heading-line-height;
font-size: $toc-heading-font-size;
}
.toc__list {
@extend %list-unstyled;
> li {
@extend %body-font-italic;
padding-top: $spacer-xxs;
padding-bottom: $spacer-xxs;
padding-left: $spacer-md;
line-height: $toc-anchor-line-height;
font-size: $toc-anchor-font-size;
}
> li + li {
border-top: 1px solid $toc-border-color;
}
}
.toc__anchor {
@extend %link-unstyled;
@include hover-fill($link-hover-color-light, $brand-text, $brand-text);
display: inline-block;
position: relative;
z-index: 1;
padding: 0;
&::before {
@extend %icon; // inline-block
position: absolute;
top: $spacer-xxs;
left: -$spacer-md;
width: $spacer-base;
color: $brand-interaction;
// font-size: $anchor-list-font-size;
content: $icon-arrow-down;
}
}
@media screen and (min-width: $grid-breakpoint-xl) {
.toc {
margin-top: $spacer-xxs;
margin-right: $spacer-xl;
}
}
There are no notes for this item.