Nachhaltige Lösungen
für die Energiewende

:root {
–grid-gap: 35px;
–background: white;
–foreground: white;
}

.icon-container-t {
position: relative;
background-color: var(–background);
display: grid;
margin: auto;

width: 35%;
aspect-ratio: 0.5;

grid-template: „icon-1 icon-2“
„icon-3 icon-4“
„icon-5 icon-6“
„icon-7 icon-8“;

grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: var(–grid-gap);
}

.animated-icon-t,
.animated-icon-t * {
transition: all 0.5s ease;
right: 0
}

.animated-icon-t {
position: relative;

z-index: 1;

width: 100%;
height: 100%;

aspect-ratio: 1;
}

.animated-icon-t.r.passive {
transform: translateX(100%);
}

.animated-icon-t.l.passive {
transform: translateX(-100%);
}

.animated-icon-t.active {
transform: translateX(100%) translate(-8px, 8px);
}

.animated-icon-t.l * {
left: 0;
}

.animated-icon-t.l.active {
transform: translateX(-100%) translate(8px, 8px);
}

.animated-icon-t>.background {
background-color: var(–background);
position: absolute;
width: 100%;
height: 100%;

border: 2px solid #ddd;
}

.animated-icon-t.active>.background {
background-color: var(–foreground);
width: 300%;

border-color: var(–foreground);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}

.animated-icon-t>.border {
position: absolute;
z-index: -10;
background-color: var(–background);

width: 100%;
height: 100%;

border: 2px solid transparent;
}

.animated-icon-t.active>.border {
transform: translate(10px, -10px);
width: 300%;

border-image: 1;
border-image-source: linear-gradient(90deg, #b61620, #f33f3f);
}

.animated-icon-t.l.active>.border {
transform: translate(-10px, -10px);
border-image-source: linear-gradient(-90deg, #b61620, #f33f3f);
}

.animated-icon-t img {
position: absolute;
top: 0;
left: 0;

width: 100%;
height: 100%;

padding: 30%;
overflow: visible;
}

.animated-icon-t:not(.active) img {
filter: brightness(0%) invert(100%) brightness(86%);
}

.animated-icon-t span {
position: absolute;
padding: 0px;

top: 50%;
left: 40%;
width: 200%;
max-height: 100%;
transform: translateY(-50%);

opacity: 0;

–awb-text-font-family: „Inter“;
–awb-text-font-style: bold;
–awb-text-font-weight: 500;
–awb-font-size: 12px;
text-align: center;
line-height: 1.5;

transition-duration: 0.25s;
pointer-events: none;
}

.animated-icon-t.r span {
left: -140%;
}

.animated-icon-t.active span {
opacity: 1;
left: 100%;

transition-duration: 0.5s;
}

.animated-icon-t.r.active span {
left: -200%;
}

.animated-icon-t::after {
content: “;
position: absolute;

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

width: 100%;
height: 70%;

border: solid #ddd;
border-width: 0px 1px 0px 0px;

opacity: 0;
transition: all 0.5s ease;
}

.animated-icon-t.r::after {
border-width: 0px 0px 0px 1px;
}

.animated-icon-t.active::after {
opacity: 1;
}

function onLoadTablet() {
// Die Dauer zwischen den einzelnen Animationen in Millisekunden
const displayDur = 5000;

const icons = document.getElementsByClassName(‚animated-icon-t‘);

// Ein Zeitstempel um festzuhalten wann die Animation gestartet ist
let startTs = null;

// Ein Zeitstempel, der festhält wie lang die Animation schon lief,
// als sie pausiert wurde (z.B. wenn der Nutzer den Tab wechselt)
let elapsedWhenPaused = 0;

// Diese Funktion animiert eine der Reihen
// row: Wählt die Reihe aus
// index: Wählt das Icon in der Reihe aus, welches größer werden soll
const animateRow = function(row, index) {
// Setzt das ausgewählte Icon auf aktive
icons[2 * row + index].classList.add(‚active‘);

// Setzt das andere Icon auf passiv
icons[2 * row + (1 – index)].classList.add(‚passive‘);
};

// Resettet eine ganze Reihe in den Normalzustand
const resetRow = function(row) {
icons[2 * row].classList.remove(‚active‘);
icons[2 * row].classList.remove(‚passive‘);
icons[2 * row + 1].classList.remove(‚active‘);
icons[2 * row + 1].classList.remove(‚passive‘);
};

// Resettet alle Reihen
const resetAll = function() {
for (let i = 0; i < 4; i++)
resetRow(i);
};

// Diese Funktion wird in einer Schleife aufgerufen und
// kontrolliert die einzelnen Schritte der Animation
const step = function(ts) {
// Wenn der Browser nicht sichtbar ist, (z.B. minimiert)
// dann tue nichts, und gehe zum nächsten Animationsschritt
if (document.hidden)
return window.requestAnimationFrame(step);

if (startTs === null) startTs = ts;

// Speicher wie viel Zeit seit begin der Animation vergangen ist
const elapsed = ts – startTs;

// Zeige die jeweiligen Animationen nacheinander an
if (elapsed < displayDur) {
resetAll();
animateRow(0, 0);
animateRow(1, 1);
} else if (elapsed < 2 * displayDur) {
resetAll();
animateRow(0, 1);
animateRow(1, 0);
} else if (elapsed < 2 * displayDur + 500) {
resetAll();
} else if (elapsed < 3 * displayDur + 500) {
animateRow(2, 0);
animateRow(3, 1);
} else if (elapsed < 4 * displayDur + 500) {
resetAll();
animateRow(2, 1);
animateRow(3, 0);
} else if (elapsed 4 * displayDur + 1000) {
startTs = ts;
}

// Rufe den nächsten Animationsschritt auf
window.requestAnimationFrame(step);
}

// Starte die Animation
window.requestAnimationFrame(step);

// Wenn der Tab gewechselt wird, oder der Browser minimiert wird,
// speicher den aktuellen Stand der Animation und beginne von dort aus wieder,
// wenn der Tab wieder sichtbar wird
document.addEventListener(‚visibilitychange‘, event => {
if (document.hidden)
elapsedWhenPaused = document.timeline.currentTime – startTs;
else
startTs = document.timeline.currentTime – elapsedWhenPaused;
});
}

// Starte die gesammte Animation erst dann, wenn die Seite geladen ist
window.addEventListener(‚load‘, onLoadTablet);