Long-List der Nachhaltigkeitsaspekte
.long-list {
font-family: 'Roboto Condensed', sans-serif;
font-size: $font-size-lg;
font-weight: 400;
width: 100%;
caption {
padding-top: $spacer * 1.5;
text-align: right;
}
tr {
border-bottom: 1px solid $primary;
}
th,
td {
border-left: 1px solid $primary;
border-right: 1px solid $primary;
font-weight: 500;
line-height: 1.2;
padding: ($spacer * .75) $spacer;
text-align: center;
word-break: keep-all;
&:first-child {
border-left: none;
font-weight: 400;
text-align: left;
width: 99%;
}
&:last-child {
border-right: none;
}
}
thead th {
color: $primary;
font-weight: 500;
}
tbody {
th {
background-color: $gray-100;
font-weight: 500 !important;
}
td:first-child {
padding-left: $spacer * 2;
position: relative;
}
// That's just for removing part of the bottom border for "indented rows". Relative positioning on table cells
// is actually undefined but by now it seems to work in every major browser.
tr td:first-child::after {
background-color: #fff;
bottom: -1px;
content: '';
display: block;
height: 1px;
left: 0;
position: absolute;
width: $spacer * 2;
}
// Aaaaand removing it for every tbody's last row except for the very last row in the very last tbody.
&:not(:last-child) tr:last-child td:first-child::after {
display: none;
}
}
a {
color: $primary;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.long-list__idro {
@at-root th#{&} {
font-size: $font-size-lg;
font-weight: 700;
}
@at-root td#{&} {
font-weight: 500;
}
}
.long-list__materiality {
font-weight: 500;
}
.long-list__row {
&__actions {
font-size: $font-size-lg;
text-align: right;
a {
text-decoration: none;
}
}
@at-root tbody &--child {
> td:first-child {
padding-left: $spacer * 4;
}
}
}
Varianten
Standard
I = Impacts = Auswirkungen
D = Dependencies = Abhängigkeiten
R = Risk = Risiko
O = Opportunity = Chance
| |
I |
D |
R |
O |
Wesentliche Auswirkungen |
Wesentliche Risiken/Chancen |
Wesentlichkeit |
|
| ESRS E1 Klimawandel |
Wesentlich |
|
|
Anpassung an den Klimawandel
|
10 |
4 |
8 |
8 |
2/10 |
4/16 |
Wesentlich |
|
|
Klimaschutz
|
3 |
3 |
2 |
3 |
0/3 |
0/ |
Unwesentlich |
|
|
Energie
|
10 |
4 |
8 |
8 |
2/10 |
4/16 |
Unwesentlich |
|
| ESRS E2 Umweltverschmutzung |
Wesentlich |
|
| Anpassung an den Klimawandel |
10 |
4 |
8 |
8 |
2/10 |
4/16 |
Unbestimmt |
|
| Klimaschutz |
3 |
3 |
2 |
3 |
0/3 |
0/ |
Unbestimmt |
|
| Energie |
10 |
4 |
8 |
8 |
2/10 |
4/16 |
Unbestimmt |
|
| ESRS E3 Wasser- und Meeresressourcen |
Wesentlich |
|
| Anpassung an den Klimawandel |
10 |
4 |
8 |
8 |
2/10 |
4/16 |
Unbestimmt |
|
| Klimaschutz |
3 |
3 |
2 |
3 |
0/3 |
0/ |
Unbestimmt |
|
| Energie |
10 |
4 |
8 |
8 |
2/10 |
4/16 |
Unbestimmt |
|
| Anpassung an den Klimawandel |
10 |
4 |
8 |
8 |
2/10 |
4/16 |
Unbestimmt |
|
| Klimaschutz |
3 |
3 |
2 |
3 |
0/3 |
0/ |
Unbestimmt |
|
| Energie |
10 |
4 |
8 |
8 |
2/10 |
4/16 |
Unbestimmt |
|
<table class="long-list">
<caption>
<strong>I</strong> = Impacts = Auswirkungen<br>
<strong>D</strong> = Dependencies = Abhängigkeiten<br>
<strong>R</strong> = Risk = Risiko<br>
<strong>O</strong> = Opportunity = Chance
</caption>
<thead>
<tr>
<th> </th>
<th class="long-list__idro" scope="col">I</th>
<th class="long-list__idro" scope="col">D</th>
<th class="long-list__idro" scope="col">R</th>
<th class="long-list__idro" scope="col">O</th>
<th scope="col">Wesentliche Auswirkungen</th>
<th scope="col">Wesentliche Risiken/Chancen</th>
<th class="long-list__materiality" scope="col">Wesentlichkeit</th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col" colspan="7">ESRS E1 Klimawandel</th>
<th class="text-material">Wesentlich</th>
<th class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-user-edit"></i>
</a>
</th>
</tr>
<tr>
<td>
<a href="#">Anpassung an den Klimawandel</a>
</td>
<td class="long-list__idro">10</td>
<td class="long-list__idro">4</td>
<td class="long-list__idro">8</td>
<td class="long-list__idro">8</td>
<td>2/10</td>
<td>4/16</td>
<td class="long-list__materiality text-material">Wesentlich</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
<tr>
<td>
<a class="text-accent" href="#">
Klimaschutz
</a>
</td>
<td class="long-list__idro">3</td>
<td class="long-list__idro">3</td>
<td class="long-list__idro">2</td>
<td class="long-list__idro">3</td>
<td>0/3</td>
<td>0/</td>
<td class="long-list__materiality text-not-material">Unwesentlich</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
<tr>
<td>
<a href="#">Energie</a>
</td>
<td class="long-list__idro">10</td>
<td class="long-list__idro">4</td>
<td class="long-list__idro">8</td>
<td class="long-list__idro">8</td>
<td>2/10</td>
<td>4/16</td>
<td class="long-list__materiality text-not-material">Unwesentlich</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="col" colspan="7">ESRS E2 Umweltverschmutzung</th>
<th class="long-list__materiality text-material">Wesentlich</th>
<th class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-user-edit"></i>
</a>
</th>
</tr>
<tr>
<td>Anpassung an den Klimawandel</td>
<td class="long-list__idro">10</td>
<td class="long-list__idro">4</td>
<td class="long-list__idro">8</td>
<td class="long-list__idro">8</td>
<td>2/10</td>
<td>4/16</td>
<td class="long-list__materiality">Unbestimmt</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
<tr>
<td>Klimaschutz</td>
<td class="long-list__idro">3</td>
<td class="long-list__idro">3</td>
<td class="long-list__idro">2</td>
<td class="long-list__idro">3</td>
<td>0/3</td>
<td>0/</td>
<td class="long-list__materiality">Unbestimmt</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
<tr>
<td>Energie</td>
<td class="long-list__idro">10</td>
<td class="long-list__idro">4</td>
<td class="long-list__idro">8</td>
<td class="long-list__idro">8</td>
<td>2/10</td>
<td>4/16</td>
<td class="long-list__materiality">Unbestimmt</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="col" colspan="7">ESRS E3 Wasser- und Meeresressourcen</th>
<th class="long-list__materiality text-material">Wesentlich</th>
<th class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-user-edit"></i>
</a>
</th>
</tr>
<tr>
<td>Anpassung an den Klimawandel</td>
<td class="long-list__idro">10</td>
<td class="long-list__idro">4</td>
<td class="long-list__idro">8</td>
<td class="long-list__idro">8</td>
<td>2/10</td>
<td>4/16</td>
<td class="long-list__materiality">Unbestimmt</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
<tr class="long-list__row--child">
<td>Klimaschutz</td>
<td class="long-list__idro">3</td>
<td class="long-list__idro">3</td>
<td class="long-list__idro">2</td>
<td class="long-list__idro">3</td>
<td>0/3</td>
<td>0/</td>
<td class="long-list__materiality">Unbestimmt</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
<tr class="long-list__row--child">
<td>Energie</td>
<td class="long-list__idro">10</td>
<td class="long-list__idro">4</td>
<td class="long-list__idro">8</td>
<td class="long-list__idro">8</td>
<td>2/10</td>
<td>4/16</td>
<td class="long-list__materiality">Unbestimmt</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
<tr>
<td>Anpassung an den Klimawandel</td>
<td class="long-list__idro">10</td>
<td class="long-list__idro">4</td>
<td class="long-list__idro">8</td>
<td class="long-list__idro">8</td>
<td>2/10</td>
<td>4/16</td>
<td class="long-list__materiality">Unbestimmt</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
<tr class="long-list__row--child">
<td>Klimaschutz</td>
<td class="long-list__idro">3</td>
<td class="long-list__idro">3</td>
<td class="long-list__idro">2</td>
<td class="long-list__idro">3</td>
<td>0/3</td>
<td>0/</td>
<td class="long-list__materiality">Unbestimmt</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
<tr class="long-list__row--child">
<td>Energie</td>
<td class="long-list__idro">10</td>
<td class="long-list__idro">4</td>
<td class="long-list__idro">8</td>
<td class="long-list__idro">8</td>
<td>2/10</td>
<td>4/16</td>
<td class="long-list__materiality">Unbestimmt</td>
<td class="long-list__row__actions">
<a href="#" title="Bearbeiten">
<i class="ti ti-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>