-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcss-spalten.html
296 lines (252 loc) · 19.6 KB
/
css-spalten.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html lang="de" prefix="og: http://ogp.me/ns#">
<!--
Hallo Fremde:r,
schön, dass du dich umschaust! Falls du Fragen hast oder wissen
möchtest, wie bestimmte Sachen auf meiner Website funktionieren,
schreib doch einfach an postfach2b [ät] web.de oder sende einen
Post an @[email protected].
Weiterhin viele schöne Entdeckungen!
-->
<head>
<meta charset="UTF-8">
<title>CSS-Spalten gegen zu lange Textzeilen // @cz+</title>
<link href='bestand/style.css' rel='stylesheet'>
<link href="bestand/czSlab.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="https://charakterziffer.github.io/rss.xml" rel="alternate" type="application/rss+xml" title="@cz+ Blogartikel">
<link rel="icon" href="/bestand/favicon.png">
<link rel="apple-touch-icon" href="/bestand/touchicon.png">
<meta name="theme-color" content="#228811">
<meta name="color-scheme" content="light dark">
<meta name="description" content="Die CSS-Eigenschaft `columns` bricht einen Online-Text in mehrere Spalten um. So werden Zeilen auf einer Website nicht unleserlich lang.">
<meta name="author" content="Gerhard Großmann, postfach2b [ät] web.de">
<meta name="fediverse:creator" content="[email protected]" />
<meta name="keywords" content="Gerhard Großmann, Regensburg, Hohenfels, charakterziffer, Blog, Twitter, Mastodon">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="referrer" content="strict-origin">
<style> /* QR-Code mit URL für Ausdrucke, siehe smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ */
@media print { header:after {
content: url('https://chart.googleapis.com/chart?cht=qr&chs=110x110&chl=https://charakterziffer.github.io/css-spalten.html&choe=UTF-8');
position: absolute; right: .5em; top:.2em; z-index:-1; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } </style>
<meta property="og:image" content="https://charakterziffer.github.io/bestand/cz200x200.jpg">
</head>
<body>
<header>
<a title="Zur Startseite" href="https://charakterziffer.github.io/"><img src="https://charakterziffer.github.io/bestand/favicon.png" width="59.8" height="59.8" alt="">@charak<br>terziffer</a>
<div>
<form id="suchform" method="GET" action="https://duckduckgo.com/" onsubmit="javascript:document.getElementById('q').value = document.getElementById('keyword').value + ' site:charakterziffer.github.io'">
<input type="text" id="keyword" placeholder="Suche mit DuckDuckGo" aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="hidden" id="q" name="q">
<input type="hidden" name="kl" value="de-de">
<input type="hidden" name="kj" value="281">
<input type="hidden" name="kx" value="666">
<input type="hidden" name="k9" value="281">
<input type="hidden" name="kaa" value="839">
<input type="hidden" name="ka" value="Source Sans Pro">
<input type="submit" value="🔍" aria-label="Suchen">
</form>
<nav class="no-hyphens no-print"><ul>
<li><a href="/archiv.html">Archiv</a></li>
<li><a href="/extra/index.html">Extra</a></li>
<li><a href="/rss.xml">RSS</a></li>
<li><a href="/index.html#impressum">Impressum</a></li>
</ul></nav>
</div>
</header>
<main>
<article>
<time datetime="2024-03-18">Mo, 18. März 2024</time>
<h1>CSS-Spalten gegen zu lange Textzeilen</h1>
<style>
<!--
style[contenteditable] { display:block; width: 98.8%;
margin: 1.5em 0 1.167em; padding: .05em .2em; border-radius: .1em;
font: .9em/1.667 'Source Code Pro', Consolas, Monaco, 'Lucida Console',
'Andale Mono', 'DejaVu Sans Mono', monospace; white-space: pre-wrap;
background-color: var(--nebelgrau);
-webkit-box-decoration-break: clone; box-decoration-break: clone; }
style[contenteditable]::before { display:inline-block; margin:0 .1em -.2em 0; vertical-align:-12%; content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221.2em%22%20height%3D%221.2em%22%20viewBox%3D%220%200%2014%2014%22%20preserveAspectRatio%3D%22xMinYMin%20meet%22%3E%3Cg%20style%3D%22fill%3Anone%3Bstroke%3A%23c2b%3Bstroke-width%3A1.5%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%3E%3Cpath%20d%3D%22M%2011%2C11%2011%2C8%205%2C2%202%2C5%208%2C11%20z%22%2F%3E%3Cpath%20d%3D%22m%2010%2C7%20-3%2C3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[class^="beispiel"] { font: .75em/1.2 'New York', 'Bitstream Charter', 'Constantia', Georgia, serif;
hyphens: auto; background-color: var(--hintergrund); border: 1px solid var(--text-basis);
width: calc(100vw - 6em); min-width: 100%; padding: 1em 1.5em;}
[class^="beispiel"] > p { margin: 0; text-align: justify; }
.beispiel-3 { padding: 1.5em 1.5em 0; }
.beispiel-3 > div { display: inline-block; margin-bottom: 1.5em;
width:100%; height: 90px; background-color: var(--grau-matt, #444);}
.beispiel-3 > div:nth-of-type(2n) { background-color: var(--akzent-basis, #839); }
.beispiel-3 > div:nth-of-type(3n) { background-color: var(--gruen-basis, #281); }
.beispiel-3 > div:nth-of-type(5n) { background-color: var(--akzent-aktiv, #c2b); }
.beispiel-3 > div:nth-of-type(2n+1) { height: 100px; }
.beispiel-3 > div:nth-of-type(3n+2) { height: 120px; }
.beispiel-3 > div:nth-of-type(5n+3) { height: 80px; }
.beispiel-3 > div:nth-of-type(7n) { height: 150px; }
-->
</style>
<p>In einem aktuellen Webprojekt habe ich mit längeren Texten zu tun.
Weil sich die Breite der Texte an das Browserfensters anpassen soll,
entstehen mitunter ziemlich lange Textzeilen.
Für eine gute Lesbarkeit sollte eine Zeile aber <a href="https://leserlich.info/text/zeilenlaenge">zwischen 35 und 80 Zeichen umfassen</a>.</p>
<p>Ich könnte nun eine maximale Zeilenlänge festlegen,
dann entsteht rechts ein leerer Rand, wenn das Browserfenster breiter wird.
So mache ich das hier in meinem Blog:
Die Textbreite bleibt immer schmaler als 690 Pixel,
die freie Fläche rechts füllen ein grünes Muster und eine Randnotiz.</p>
<h2 id="textspalten-mit-css">Textspalten mit CSS</h2>
<p>Eine andere Möglichkeit ist es, den Text über mehrere Spalten fließen zu lassen.
So bleiben die Zeilenlängen begrenzt und ich kann trotzdem die gesamte Fensterbreite für den Text nutzen.
Bis vor rund zehn Jahren war das auf Websites schwierig umzusetzen.
Dann aber hat die Formatierungssprache CSS,
mit der man Websites gestaltet,
einen neuen Befehl bekommen:
<code>columns</code>.</p>
<p>Das Geschickte:
Man kann nicht nur die gewünschte Anzahl der Spalten festlegen
(z.<small> </small>B. <code>columns: 2;</code>),
sondern auch eine optimale Spaltenbreite.
Dann versucht der Browser von allein, diese Breite zu erreichen,
und wählt eine Spaltenzahl, damit es möglichst gut passt.
Ist das Browserfenster schmal, reicht eine einzige Spalte.
Wird das Fenster deutlich größer als die gewünschte Spaltenbreite, teilt sich der Text auf zwei Spalten auf.
Bei noch breiteren Fenstern kommen entsprechend weitere Spalten hinzu.</p>
<h2 id="und-so-siehts-aus">Und so sieht’s aus</h2>
<p>Beispiel gefällig?
Ich habe nachfolgend ein extrabreites Textfeld angelegt und mit sinnfreiem Blindtext gefüllt.
Die gewünschte Spaltenbreite habe ich auf <code>35ch</code> gesetzt
(die Maßeinheit <code>ch</code> steht für <em>characters</em>, also Buchstaben).
Das ist aber nur ein ungefährer Wert, denn unsere Spalten passen sich ja flexibel an die Fensterbreite an.
Zusätzlich habe ich den Abstand der Spalten (<code>column-gap</code>) auf <code>3ch</code> festgelegt.
Hier ist der CSS-Code dazu, darunter das Textfeld mit den entsprechenden Spalten.</p>
<style contenteditable="">.beispiel-1 {
columns: 35ch;
column-gap: 3ch;
}</style>
<figure>
<div class="beispiel-1"><p><b style="font:inherit; font-weight:bold;">Das ist nur Platzhalter-Text!</b> Wir verstecken offene Seiten, um Baum und Blume jetzt zu trinken. Geh her, schwimm alt, ihm ging schon die Arbeit ins Loch; den alle verlieren. Über König bin ich Stein gelaufen, zwei Häuser dort sind alle fertig. Tief darauf wirft der Mann volle Teller vom Auto ins kalte Dorf.</p>
<p>Das letzte Ding ist dann fest. Allein brauchen wir die Straße. Nein, wenn uns gebissen, findet die Hand den Wald heiß. Weil ab vier trägt der Junge Winter gelb zum Sommer, ob deshalb der Tisch lang und kräftig nach nichts denkt? Ein Brief, Kuss und Kaffee am Abend holen sieben Gärten. Kennen Sie die Zeit, außer einer badet schnell mal in Luft, sofort wurde fliegen hoch geschrieben.</p>
<p>Er läuft Bein, die Nase schlechte Worte isst. Eltern dürfen Wasser bringen, das Tier dachte im Bett, so begann der Löwe seine sehr gute Frage. Ihr spielt Bauer mit Milch und Zahn, denn die Leute wird der Fisch spät sehen. Mit dem Onkel steigen etwas Spiel, beide Arme rennen weg etwas gestellt. Keiner soll schlimm ins Gesicht das Bild bezahlen, fing die Uhr auf Sache eine böse Minute. Ein Weg fuhr gerade und trifft ein wahres Buch.</p>
<p>Mein Igel kann die Angst kaufen. In dir schenken Fehler dem Arzt Erde. Sitzen Anfang und Antwort? Nachher stellt jeder Bruder ein Glas Nacht für Omas Licht zur Geschichte. Wie frei das Rad auf den Boden fiel, leise hast du eine Woche Spaß. War der Herr Lehrer lustig?</p>
<p>Mehr liegen sah ich tot, warum nun glücklich legen? Los, bei heißen Zahlen helfen natürlich gern diese roten Schuhe! Die Äpfel leben einfach hin, was den Ferien zum Land nächste Küche hängt. Geld lese nie grün hinter Weihnachten, oder durch Menschen las langsam nah und rund. An Brot waschen wir also doch kaputte Aufgaben. Sie erzählen, als wollen sie fast noch davon antworten, fangen vielleicht erst noch ganz die weiße Kuh. Neben dem Schiff schreien Elefanten vor Freude …</p>
<p>Stand der Fuß, lag der Stuhl, rief der Freund, nahm die Stunde gegen die Ohren sich Tasse heraus. Stark erklärst du, wie lieb ich ihn haben könnte, so gab Vater. Vom Lernen bleiben einige immer zurück. Sie fährt, die Katze immer dabei. Richtig ließ, die Schwester nimmt.</p></div>
</figure>
<p>Übrigens könnt ihr den Code über dem Textbeispiel verändern!
Bessert die <code>35ch</code> zum Beispiel mal in <code>10ch</code> oder <code>60ch</code> aus und schaut, was passiert.
Wenn möglich, macht auch mal euer Browserfenster breiter oder schmaler:
Die Spalten passen sich an.</p>
<p>Wie erwähnt, kann man nicht nur eine gewünschte Breite, sondern auch eine feste Spaltenzahl angeben.
Damit verschenkt man allerdings die Flexibilität und bekommt evtl. zu lange oder kurze Zeilen.
Auch wenn man das Fenster sehr schmal oder sehr breit zieht, bleibt die Anzahl der Spalten gleich.
Hier zum Ausprobieren:</p>
<style contenteditable="">.beispiel-2 {
columns: 3;
column-gap: 2.5ch;
column-rule: 1px solid coral;
}</style>
<figure>
<div class="beispiel-2"><p>Wir verstecken offene Seiten, um Baum und Blume jetzt zu trinken. Geh her, schwimm alt, ihm ging schon die Arbeit ins Loch; den alle verlieren. Über König bin ich Stein gelaufen, zwei Häuser dort sind alle fertig. Tief darauf wirft der Mann volle Teller vom Auto ins kalte Dorf.</p>
<p>Das letzte Ding ist dann fest. Allein brauchen wir die Straße. Nein, wenn uns gebissen, findet die Hand den Wald heiß. Weil ab vier trägt der Junge Winter gelb zum Sommer, ob deshalb der Tisch lang und kräftig nach nichts denkt? Ein Brief, Kuss und Kaffee am Abend holen sieben Gärten. Kennen Sie die Zeit, außer einer badet schnell mal in Luft, sofort wurde fliegen hoch geschrieben.</p>
<p>Er läuft Bein, die Nase schlechte Worte isst. Eltern dürfen Wasser bringen, das Tier dachte im Bett, so begann der Löwe seine sehr gute Frage. Ihr spielt Bauer mit Milch und Zahn, denn die Leute wird der Fisch spät sehen. Mit dem Onkel steigen etwas Spiel, beide Arme rennen weg etwas gestellt. Keiner soll schlimm ins Gesicht das Bild bezahlen, fing die Uhr auf Sache eine böse Minute. Ein Weg fuhr gerade und trifft ein wahres Buch. Mein Igel kann die Angst kaufen.</p>
<p>In dir schenken Fehler dem Arzt Erde. Sitzen Anfang und Antwort? Nachher stellt jeder Bruder ein Glas Nacht für Omas Licht zur Geschichte. Wie frei das Rad auf den Boden fiel, leise hast du eine Woche Spaß. War der Herr Lehrer lustig?</p>
<h2 style="font:inherit; font-weight:bold; font-size:1.1em; margin:.8em 0 .2em -.02em;">Eine Zwischenüberschrift</h2>
<p>Mehr liegen sah ich tot, warum nun glücklich legen? Los, bei heißen Zahlen helfen natürlich gern diese roten Schuhe! Die Äpfel leben einfach hin, was den Ferien zum Land nächste Küche hängt. Geld lese nie grün hinter Weihnachten, oder durch Menschen las langsam nah und rund. An Brot waschen wir also doch kaputte Aufgaben. Sie erzählen, als wollen sie fast noch davon antworten, fangen vielleicht erst noch ganz die weiße Kuh. Neben dem Schiff schreien Elefanten vor Freude …</p>
<p>Stand der Fuß, lag der Stuhl, rief der Freund, nahm die Stunde gegen die Ohren sich Tasse heraus. Stark erklärst du, wie lieb ich ihn haben könnte, so gab Vater. Vom Lernen bleiben einige immer zurück. Sie fährt, die Katze immer dabei. Richtig ließ, die Schwester nimmt.</p></div>
</figure>
<p>Als Ergänzung habe ich hier Trennlinien zwischen den Spalten eingefügt.
Das geht mit dem Befehl <code>column-rule</code> („Spalten-Linie“).
<code>1px</code> ist die Linienbreite (ein Pixel),
<code>solid</code> die Art der Linie (es geht zum Beispiel auch <code>dotted</code> oder <code>dashed</code>)
und <code>coral</code> ist die <a href="https://www.w3schools.com/colors/colors_names.asp">Farbe</a> (probiert gern <code>green</code>, <code>indigo</code> oder <code>peru</code>).</p>
<h2 id="kein-professioneller-spaltensatz">Kein professioneller Spaltensatz</h2>
<p>Im Hinterkopf behalten sollte man aber, dass <code>columns</code> nicht automatisch das beste Layout erzeugt.
Der Browser versucht, alle Textspalten etwa gleich hoch auszubalancieren,
er achtet aber nicht darauf, dass die Spaltenumbrüche an sinnvollen Stellen sitzen.
So kann es passieren, dass eine Zwischenüberschrift ganz unten in einer Spalte steht,
obwohl sie zum nachfolgenden Text gehört (wie im Beispiel 2).
Oder das letzte Wort eines Absatzes rutscht einsam in die nächste Spalte.
Solche Umbrüche würde ein professioneller Setzer vermeiden.</p>
<p>Bei kurzen oder sehr langen Textabschnitten ist der Spaltensatz nicht zu empfehlen.
Es sieht komisch aus, wenn sich wenig Text auf mehrere Spalten verteilt, weil dann nur einzelne Zeilen die Spalte füllen.
Wenn der Text sehr lang ist, können die Spalten höher werden als das Browserfenster.
Als Leser:in muss man dann von unten wieder weit nach oben scrollen, um in der nächsten Spalte weiterzulesen –
auch nicht optimal.</p>
<h2 id="bonus-einfaches-masonry-layout">Bonus: Einfaches Masonry-Layout</h2>
<p>Natürlich kann man nicht nur Text in CSS-Spalten stecken, sondern auch Bilder oder farbige Flächen.
Wenn man diese auf die Spaltenbreite bringt (mit <code>width: 100%</code>) und einfach untereinander setzt,
ergibt sich eine attraktive, verschränkte Anordnung.
Dieses Layout ist <em>Masonry</em> bekannt, englisch für „Mauerwerk“.</p>
<style contenteditable="">.beispiel-3 {
columns: 20ch;
column-gap: 3ch;
}</style>
<figure>
<div class="beispiel-3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</figure>
<p>So viel zum Thema <code>columns</code>.
Falls ihr nun auf den Geschmack gekommen seid und mit CSS noch etwas spielen möchtet,
dann lest euch durch, wie man <a href="css-muster.html">mit CSS Muster erzeugen</a> kann.</p>
<p style="margin-bottom:2.25em;">---<br>
<i>Rubrik(en):</i> <a href="archiv.html?methodik">#methodik</a> <a href="archiv.html?typografie">#typografie</a> </p>
</article>
<div class="no-print">
<h2 id="kommentieren">Artikel kommentieren</h2>
<p>Ich lege Wert auf eine respektvolle Diskussion und überprüfe jeden Kommentar, bevor er hier erscheint. Beleidigende oder unsachliche Beiträge ignoriere ich mit großem Vergnügen. Alle Angaben sind freiwillig.</p>
<form name="kommentarformular" id="kommentarformular" method="post" action="https://www.onlex.de/_formmailer.php?username=charakterziffer" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" onsubmit="javascript:document.getElementById('aktuelles-datum').value = new Date().toLocaleString('de-DE')">
<input type="hidden" name="post_id" value="/css-spalten">
<input type="hidden" name="date" id="aktuelles-datum" value="">
<input type="hidden" name="nummer" value="1">
<div>
<label for="name">Name</label>
<div><input name=" name" id="name" type="text" size="25" spellcheck="false">
<i>(Pseudonym möglich)</i></div>
<!-- fügt in der Onlex-Mail eine Leerzeile davor ein -->
</div>
<div>
<label for="mail">E-Mail</label>
<div><input name="mail" id="mail" type="email" size="25" autocomplete="email" spellcheck="false" autocapitalize="off">
<i>(wird nicht veröffentlicht)</i></div>
</div>
<div>
<label for="link">Website</label>
<div><input name="link" id="link" type="url" size="25" spellcheck="false" onblur="javascript:if ( (this.value!='') && !(this.value.match(/^https?:\/\//g)) ) { this.value = 'http://' + this.value;}"></div>
<!-- Beim Verlassen des Feldes: Falls Webadresse nicht leer und nicht mit „http(s)://“ beginnt, dann ergänze „http://“. So bekommt der Nutzer wegen type="url" keine Fehlermeldung, auch wenn er das http:// vergisst. -->
</div>
<div>
<label for="comment">Kommentar</label><br>
<textarea name="comment" id="comment" rows="8" cols="50" required spellcheck="true"></textarea>
</div>
<input type="hidden" name=" --- Hinweis" value="Mehrzeilige Kommentare in 'Apostrophe' einschließen und um </р><р> ergänzen.">
<input name="onlex_password" id="onlex_password" type="hidden" value="5">
<div><input name="submit" id="submit" type="submit" value="Veröffentlichen"></div>
</form>
<p class="no-hyphens" style="font-size:0.9em;line-height:1.667em;">Formatierungen mit HTML sind möglich, z.<small> </small>B. <em><em>betont</em></em>, <strong><strong>hervor­gehoben</strong></strong> oder <code><code>Quelltext</code></code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt="Bildbeschreibung">).</p>
</div> <!-- .no-print -->
<p style="width:48%; float:left; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="raetselkrimi.html">← Japanischer Rätselkrimi</a></p>
<p style="width:48%; float:right; text-align:right; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="ohne-style.html">Inhalt ohne Style →</a></p>
<p style="clear:both;" class="no-print"></p>
</main>
<aside class="no-hyphens">
<p>Hallo, ich bin <a href="javascript:new%20Audio('bestand/aussprache.mp3').play()" class="anhoeren" title="Aussprache anhören">Gerhard Großmann</a> aus Hohen­fels<span class="no-print"> (siehe <a href="/index.html#impressum">Impres­sum/Daten­schutz</a>)</span>. Über Fragen, Kritik und Anmer­kungen freue ich mich sehr – z.<small> </small>B.<span class="no-print"> via <a href="https://typo.social/@charakterziffer" target="_blank" rel="noopener noreferrer">Masto­don</a> oder</span> per Mail an <em>postfach2b [ät] web.de</em>.</p>
<p class="no-print">Mein <a href="/rss.xml" class="icon-rss">RSS-Feed</a> informiert immer pünkt­lich über neue Artikel. Alle bis­herigen Ein­träge finden sich <a href="/archiv.html">im Archiv</a>.</p>
<p>Die Texte in diesem Blog stehen unter einer <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de" class="icon-ccbysa">Crea­tive-Commons-Lizenz 4.0 (Deutsch­land)</a> mit Namens­nennung und Weiter­gabe unter gleichen Bedin­gungen.</p>
</aside>
<script src="https://www.onlex.de/_counter.php?username=charakterziffer" defer></script>
</body>
</html>