Interaction, Webfonts, Webtypografie / 2020-12-03 / Matthias Edler-Golla, CC BY-SA 4.0



Themen

  1. CSS-Grundeinstellungen
  2. Floating
  3. Interaction via CSS
  4. Elementen sichtbar/unsichtbar machen
  5. Einbinden von Webfonts
  6. Variable Webfonts
  7. Zeilenlänge und Zeilenabstand
  8. Automatische Silbentrennung
  9. Zitate
  10. Hoch- und tiefgestellte Zeichen
  11. Flexible Schriftgrößen Einheiten
  12. Text-Einzug bei Paragraphen
  13. Buchempfehlung

CSS-Grundeinstellungen

Folgende Grundeinstellungen finde ich sehr praktisch und füge diese deswegen grundsätzlich am Anfang meines Stylesheets ein:

CSS

/* ============ Grundeinstellungen ========== */

* {
    margin:0;
    padding: 0;
    box-sizing: border-box; /* z.B. Breite 300px bleibt 300px, trotz padding…*/
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

body {
   /* automatische Silbentrennung */
   /* die oberen zwei Zeilen für Internet Explorer, Safari und Chrome */
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
}

/* ============ ab hier alle anderen CSS-Anweisungen ========== */

Ihr könnt diese natürlich für Eure Bedürfnisse anpassen…


Floating Elements

  • Es kann nach links oder nach rechts gefloatet werden
  • Das im Source-Code oben liegende Element floatet in das untere Element
  • Das gefloatete Element muss eine Breiten-Angabe haben!

Demo

Schaut Euch die Demo ändert dabei auch die Breite Eures Browser-Fensters… Ihr könnt das Beispiel auch wieder herunterladen

HTML

<h2>Floating Headline Text</h2>
<img src="p/white_florette.svg" alt="" />
<p>Lorem ipsum no eam iudicabit patrioque, liberavisse signiferumque [...]</p>

CSS

/* nach LINKS floaten */
img {
    float: left;
    width: 250px;
}

/* nach RECHTS floaten */
img {
    float: right;
    width: 250px;
}

CodePen

See the Pen floating_text by Matthias Edler-Golla (@megolla) on CodePen.


Interaktion via CSS

Panic Button von star5112

Einfache Interaktionen können mit Hilfe von CSS relativ leicht dargestellt werden

… z.B. wenn man sich mit dem Cursor über einem Element befindet …

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

CSS

/* Cursor befindet sich über <p> */
p:hover {
    background: red;
}

Elemente unsichtbar machen

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

Dafür stellt CSS zwei unterschiedliche Anweisungen zur Verfügung:

CSS

/*  das Element wird nur ausgeblendet, der benötige Platz bleibt jedoch erhalten  */
img { visibility: hidden; }

/* Element wieder sichtbar machen */
img { visibility: visible; }

/* ============= Element  „verschwindet“ völlig ================= */

/* das Element „verschwindet“ völlig */
img { display: none; }

/* Element wieder sichtbar machen */
img { display: block; }

Hover zeigt mehr

Befindet sich der Cursor auf einem Element, wird ein weiteres Element sichtbar

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<div>
  Hover-Element
  <p>Hallo!</p>
</div>

CSS

div {
    …
    position: relative; /* Elternelement */
}

div p {
    /* Position von <p>, wenn es sichtbar wird */
    position: absolute;
    width: 300px;
    left: 200px;
    top: 15px;
    …

    /* macht das Element unsichtbar */
    display: none;
}

/* bei Hover über <div> wird das <p> sichtbar */
div:hover p {
    display: block;
}

Hover zeigt Menü

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<nav>
    <img src="p/burger.svg" alt="Menü-Icon">
    <ul>
      <li><a href="#">Startseite</a></li>
      <li><a href="#">Kontakt</a></li>
      <li><a href="#">Über mich</a></li>
      <li><a href="#">Impressum</a></li>
    </ul>
</nav>

CSS

nav {
  position: relative; /* Elternelement */
  width:36px; /* so breit wie das Burger-Icon sein soll */
}

nav img {
  width: 100%;
  height: auto;
}

nav ul {
  …

  /* Position des Menüs in Beziehung auf Burger-Icons */
  position: absolute;
  left: 10px;
  top: 10px;

  /* Menü anfangs unsichtbar */
  display:none;
}

nav:hover ul {
  /* Hovert man über das Burger-Icon, wird das Menü sichtbar */
  display: block;
}

Bilder bei :hover farbig machen

Alle in der Demo verwendeten Bilder sind von https://picsum.photos/

Mit „filter“ wird das Bild direkt im Browser verändert! Früher waren dazu zwei Bilder nötig, die ausgetaucht werden mussten…

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

CSS

img {
    /* etwas unscharf und komplett Graustufen */
    filter: blur(2px) grayscale(100%);
}

img:hover {
    /* hier kein Filter anwenden */
    filter: none;
}

Webfonts

https://typekit.com/

Webfonts ermöglichen es Webdesignern, Schriftarten zu verwenden, die nicht auf den Computern der Benutzer installiert sind.

Wikipedia

  • Webfonts müssen auf den Rechner des User geladen werden
  • Die Dateien sind in etwas so groß wie ein „mittelgroßes“ Bild (~50kB und mehr)
  • Die Browser verhalten sich beim Laden der Schrift unterschiedlich. Manche verwenden erst eine Systemschrift und schalten dann auf den richtigen Font um, andere lassen den Bereich leer, wo dann Schrift stehen soll und füllen diesen erst, wenn der Webfont geladen ist. Beide Verhaltensweise können die Benutzer irritieren…

Webfonts: Wie bekommt man sie geladen?

http://hellohappy.org/beautiful-web-type/

Es gibt ein paar Möglichkeiten, wie Webfonts in eine Website eingefügt werden können:

  1. Kostenlos gehostet: Die Schriften liegen z.B. auf den Servern von Google und können kostenlos eingebunden werden – https://fonts.google.com/
  2. Kostenpflichtig gehostet: Die Schriften bleiben auf den Servern der Vertreibern und je nach Besucherzahlen muss man dafür Miete zahlen, z.B. bei myfonts.com
  3. Gekauft und selber gehostet: Die Schriften können auf dem eigenen Server gehostet werden; man zahlt einmalig für die Fonts, z.B. bei fontspring.com
  4. Flatrate: Man zahlt einen monatlichen Betrag und darf dafür beliebig viele Fonts einsetzen, z.B. bei fonts.adobe.com, ehemals „typekit.com“
  5. Selber hosten: Die Fonts befinden sich auf dem eigenen Server und werden von dort geladen, z.B. bei fontsquirrel.com

Web Font Dienste: Google Fonts

Die Fonts werden dabei direkt von den Google-Servern in Eure Website geladen – kostenlos!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

Code zum Einbinden auf der eigenen Website

HTML

<head>
    <!-- „400italic,700italic,700,400“ geben an, welche Schriftschnitte mitgeliefert werden -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400' rel='stylesheet' type='text/css'>

    <!-- Euer normales Stylesheet NACH dem Google-Stylesheet! -->
    <link rel="stylesheet" href="c/style.css" />
</head>

CSS

/*
    im Font-Stack den gewünschten Webfont an erster Stelle einfügen,
    danach unbedingt Standard-System-Fonts als Fallback!
*/
body {
   font-family: 'Open Sans', Helvetica, Arial,sans-serif;
}

Exakte Font-weights angeben

https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans:300,300i,400,400i,800,800i

Achtung: Verwendet Ihr viele Schriften und Schriftschnitte, kann sich die Ladezeit Eurer Website deutlich erhöhen – behaltet hier Augenmaß!

Umfangreiche Font-Familien enthalten viele Strichstärken – diese kann man in CSS über die Angabe „font-weight“ exakt ansprechen.

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    …
    <!-- Webfont von Google -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,800,800i" rel="stylesheet">
    <link href="c/style.css" rel="stylesheet">
</head>

Die jeweiligen Schnitte sind direkt im Source-Code zu sehen…

CSS

body {
    font-family: 'Open Sans', Verdana, sans-serif;
}

h1 {
    /* sehr fetter Schnitt */
    font-weight: 800;
}

p {
    /* sehr dünner Schnitt */
    font-weight: 300;
}

em {
    font-weight: 300;

    /* hierdurch wird der kursive Schnitt aufgerufen */
    font-style: italic;
}

Bisher hatten wir bei font-weight nur die Angaben normal oder bold zur Verfügung…


Inspiration

http://hellohappy.org/beautiful-web-type/

Kostenloser Font für alle Sprachen

https://www.google.com/get/noto/

Der gesamte Font ist 1 GB groß!


Webfonts selber hosten

https://www.fontsquirrel.com/

Es ist auch gar nicht schwer, im eigenen Webspace Webfonts selber zu hosten!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

Vorbereitung

  1. Einen Font z.B. bei Fontsquirrel herunterladen
  2. Im eigenen Webspace hochladen und einbinden – siehe unten:

HTML

<head>
    …
    <!-- selbstgehosteter Webfont -->
    <link rel='stylesheet' href='f/fira.css' type='text/css'>
    <!-- normales Stylesheet DANACH! -->
    <link rel="stylesheet" href="c/style.css">
</head>
<body>
    <h1>Selbst gehosteter Webfont <q>Fira</q></h1>
    <p class="fira_sansbold">Hallo, ich bin <q>fira_sansbold</q></p>
    …
</body>

CSS

/* ============ Einbinden des Webfonts bei f/fira.css  =============== */
/* fette Schrift */
@font-face {
  font-family: "Fira";
  src: url("FiraSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

/* fette, kursive Schrift */
@font-face {
  font-family: "Fira";
  src: url("FiraSans-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}
…

/* ============ CSS-Anweisungen bei c/style.css  ============== */
html {
  font-family: "Fira", Verdana, sans-serif;
  font-size: 160%;
  line-height: 1.5;
}

.cursiv {
  font-style: italic;
}

.bold {
  font-weight: 700;
}

.book {
  font-weight: 400;
}

.light {
  font-weight: 100;
}
…

Warnung

Wenn Ihr – so wie oben gezeigt – die Fonts direkt einbindet, sind die Fonts sehr umfrangreich und groß, weil sie viele Zeichen beinhalten, die Ihr nicht benötigt! Mit dem Fontsquirrel Generator könnt Ihr ziemlich einfach die von Euch benötigten Zeichensätze (z.B. deutsch und englisch) auswählen und somit die Dateigrößen der Fonts drastisch reduzieren!
 
 


eigenen Font einbinden und testen

Ihr könnt somit auch Eure selbstgestalteten Fonts online zeigen – und die Benutzer testen lassen, wie Eure Schrift mit verschiedenem Text aussieht!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

Dafür müsst Ihr nur im HTML folgende Anweisung eintragen:

HTML

<div class="demo" contenteditable="true">
    Hier selber Text ausprobieren!
</div>

Ausblick: Variable Fonts

https://v-fonts.com/

Schriften können variabel angelegt werden. Das ist insbesondere für Webdesigner eine große Neuigkeit. Anstatt drei verschiedene Font-Dateien für drei verschiedene Stärken der gleichen Schrift einzubetten, reicht es künftig, lediglich einen einzelnen Font zu verwenden. Dieser Font wird dann in der Lage sein, im laufenden Betrieb verschiedene optische Zustände anzunehmen.

Das geht momentan schon, aber es gibt noch nicht allzu vielen Schriften, die als Variable Fonts umgesetzt sind!


Variable Fonts: Eigene Experimente

Nachdem die ersten, kostenlosen Variable Fonts erhältlich sind, habe ich damit etwas experimentiert:

Variable Font Slider

Demo | Download

Recursive: Mehrere Achsen sind frei einstellbar

Demo | Download

Recursive Interaktive Online-Demo

Recursive: Anpassen der Strichstärke

Demo | Download

Ihr könnt Euch auch gerne meine Experimente komplett herunterladen!


Google Variable Fonts

MuseoModerno bei font.google.com

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

Einbinden im Head des HTML-Dokuments

<link
href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@100..900&display=swap"
rel="stylesheet"
/>

CSS

/* 
Einstellen von font-weight wie bisher;
es sind jedoch auch ganz "schräge" Werte möglich!
*/
html {
    font: 120%/1.5 "MuseoModerno", Arial, sans-serif;
    font-weight: 321;
}

h2 span {
    font-weight: 777;
}

Google Variable Fonts

Guter Artikel dazu

Introduction to variable fonts on the web


Web Typografie

Webtypografie bezeichnet die Typografie für digitale Texte und den Gebrauch von Schriftarten im Web.


Bildschirmschriften

Gute Bildschirmschriften haben eine hohe x-Höhe und eine großzügige Punze

Für Überschriften und andere, groß dargestellte Texte kann man verspielte, detailreiche Schriften verwenden. Anders schaut es bei den Lesetexten aus: Dort ist eine Schrift notwendig, die auch in kleinen Größen eine gute Lesbarkeit gewährleistet!

Gut geeignet sind Schriften, die entweder für den Bildschirm gestaltet wurden (Verdana, Georgia, Lucida Grande… ), oder aber Schriften, die speziell für gute Lesbarkeit in kleinen Größen gestaltet wurden (also z.B. für Zeitungen, Telefonbücher, Lexikas…)

Als Grundregel kann man sagen, dass Schriften am Bildschirm gut lesbar sind, wenn deren Kleinbuchstaben im Verhältnis zu den Großbuchstaben "hoch" sind – wie die hier gezeigte "Meta" von Erik Spiekermann (der noch viele andere, sehr schöne & gut lesbare Schriften gestaltet hat!)


Silbentrennung

Silbentrennung wird mittlerweile von fast allen Browsern unterstützt! Allerdings werden noch die „Vendor-Prefixe“ benötigt…

Welcher Browser dies aktuell unterstützt, findet Ihr hier: http://caniuse.com/#search=hyphens

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<!-- WICHTIG: Angeben, welche Trennregeln gelten sollen – hier die deutsche! -->
<html lang="de">

CSS

body {
   /* die oberen zwei Zeilen für Internet Explorer, Safari und Chrome */
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
}

Weiterführender Artikel

Es befinden sich weitere Anpassungen in der Entwicklung, die u.a. verhindern werden, dass zu viele Trennungen hintereinander gemacht werden. Richard Rutter hat dies gut zusammengefasst.


Zeilenlänge

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.

Auch im Web gilt, dass die Zeilenlänge nicht mehr als ca. 80 Buchstaben betragen sollte. Andererseits sollte die Zeilenlänge auch nicht zu kurz sein, weil auch dies das Auge schnell ermüden kann.

Bei flexiblen Layouts kann man gut mit den CSS-Anweisungen "max-width" und "min-width" dafür sorgen, dass die Zeilenlänge in einem erträglichen Maß bleibt!

CSS

p {
    width: 70%;
    min-width: 350px;
    max-width: 550px;
}

/* oder seit kurzem mit "clamp" */
p {
    width: clamp(350px, 70%, 550px);
}

Zeilenabstand

Als idealer Zeilenabstand haben sich Werte zwischen line-height: 1.4 und line-height: 1.6 für Fließtext bewährt.

Gebt den Zeilenabstand ohne Maßeinheit an – dann passt sich der Abstand automatisch an die jeweilige Schriftgröße an!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

CSS

body {
    […]
    line-height: 1.45;
}

Mehrspaltiger Text

Mit dieser CSS-Anweisung könnt Ihr mehrspaligen Text gestalten, bei dem der Text von einer Spalte in die andere fließt – so wie Ihr das z.B. bei Indesign kennt…

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

Verändert die Breite des Browser-Fensters, wenn Ihr Euch die Demo anschaut!

CSS

.mehrspaltig {
    /* Blocksatz */
    text-align: justify;

    /* Breite des Textes */
    column-width:16em;

    /* Abstand zwischen den Textblöcken */
    column-gap:1em;

    /* Trennlinie in Grau, nur falls gewünscht! */
    column-rule : 1px solid #ccc;
}

CodePen

See the Pen mehrspaltiger_text by Matthias Edler-Golla (@megolla) on CodePen.


Zitate

Zitate am besten nicht direkt mit Anführungszeichen auszeichnen sondern besser mit <q>Zitat</q>. Dann wissen auch die Suchmaschinen, dass es sich hier um ein Zitat handelt …

meine Gänsefüßchen

HTML

meine <q>Gänsefüßchen</q>

CSS

q:before {content:"„";}
q:after {content:"“";}

/* oder so */
q:before {content:"»";}
q:after {content:"«";}

Hoch- und tiefgestellte Zeichen

CO2, m3, Post-It®

HTML

<!-- tiefgestelltes Zeichen -->
CO<sub>2</sub> 

<!-- hochgestelltes Zeichen -->
m<sup>3</sup> 

Post-It<sup>®</sup>

CSS

sup {
    font-size: 70%;
    color: red;
}

via CSS könnt Ihr dann auch <sub> oder <sup> ansprechen und individuell gestalten!


Flexible Schriftgrößen Einheiten

Nützt man eine dieser neuen Größenangaben, passt sich auch die Textgröße an den zur Verfügung stehenden Platz an!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

viewport = Fläche innerhalb des Browserfensters

1vw     =   1% der viewport Breite
1vh     =   1% der viewport Höhe
1vmin   =   1vw oder 1vh, je nach dem, was davon **kleiner** ist
1vmax   =   1vw oder 1vh, je nach dem, was davon **größer** ist

CSS

.vw {
    font-size: 5vw;
}

.vh {
    font-size: 5vh;
}

.vmin {
    font-size: 5vmin;
}

.vmax {
    font-size: 5vmax;
}

Man kann damit nicht nur die Größe von Text sondern auch von anderen HTML-Elementen festlegen!


Flexible Schriftgrößen eingrenzen

Durch die relativ neuen CSS-Anweisungen min(), max() und clamp() könnt Ihr verhindern, dass z.B. Euer Text gigantisch groß oder winzig klein wird, wenn sich die Browser-Breite ändert.

Für mich ist dabei die Anweisung clamp() die praktischste, weil sie eben sowohl die Ober- als auch die Untergrenze festlegt…

Ohne diese Anweisungen müsstet Ihr dafür media-Queries verwenden, was deutlich umständlich ist!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

CSS

/* Der Text wird nie kleiner als 30px, kann aber beliebig groß werden  */
.max {
    font-size: max(6vw, 30px);
}

/* Der Text wird nie größer als 200px, kann aber beliebig klein werden  */
.min {
    font-size: min(6vw, 30px);
}

/* Der Text wird nie kleiner als 30px, nie größer als 60px 
und passt sich dazwischen an die Browserfenster-Breite an */
.clamp {
    font-size: clamp(30px, 6vw, 60px);
}

Ihr könnt diese Anweisungen nicht nur für Text sondern auch für ganze Artikel verwenden und so festlegen, wie breit dieser laufen soll:

CSS

/* Breite von Textblöcken festlegen */
article {
    width: clamp(320px, 90%, 600px);
    margin: 5% auto;
}

Text-Indent: Text-Einzug bei Paragraphen

Beachtet, wie der Paragraph direkt nach der Überschrift keinen Texteinzug hat!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<p>Lorem ipsum qui ex sale facilis, vel in quidam adolescens.</p>
<p>Principes dignissim dissentias quo ea…</p>

<h3>Sit an amet</h3>
<p>Vel ancillae offendit id, te eum nonumy mentitum, id per detracto postulant repudiandae.</p>

CSS

article p {
    margin: 0;
}
/* durch das "p+p" wird erst beim 2. Absatz der Einzug gemacht … */
article p+p {
    text-indent: 1.5em;
}

Initialien

:first-letter Der jeweils erste Buchstabe eines Paragraphen bekommt eine spezielle Behandlung.

Achtung: Ihr müsst dafür dem 1. Buchstaben keine eigene Klasse geben!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

CSS

p:first-letter {
    font-weight: bold;
    font-size: 290%;
    color: red;
    float: left;
    margin: -.2em .1em -.4em 0;
}

Erste Zeile hervorgehoben

Damit kann man jeweils die 1. Zeile eines Absatzes hervorheben – egal wie lange diese ist!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

CSS

/* jeweils die 1. Zeile eines Absatzes */
article p:first-line {
    color: red;
    font-size: 110%;
}

Zwischenpräsentation nächsten Donnerstag (10.12.)

Serious von zoghal

Präsentation via Zoom und „Bildschirm-Teilen“

  • pro Student:in ca. 2 Minuten
  • gerne direkt in Sketch, XD oder Figma präsentieren
  • sowohl die Desktop- als auch die Smartphone-Ansichten zeigen

Übung zu Web-Typografie

Briefing

  • HTML ist schon fertig, nicht verändern – nur das Stylesheet anpassen
  • Schriftgröße der Überschrift Typografie via der (neuen) Maxeinheit vw festlegen und via calc() auf ein vernünftiges Maß begrenzen
  • Mehrspaltigen Text via Multi-Column-Anweisungen einbauen – so dass dieser Text von einer Spalte in die nächste fließt
  • es sind diesmal keine Media-Queries notwendig, damit sich die Seite an verschiedene Browser-Breiten anpasst – das erledigt die (richtige) Multi-Column-Anweisung

Integration von Webfonts via Google-Fonts

  • Fügt für die Überschrift den Webfont Montserrat thin 100 ein
  • Für den restlichen Text bitte den Webfont Fira Sans in den Schriftstärken extra light 200 italic und regular 400 einbauen

Hover-Menü

Die Links zu weiteren Web-Typografie-Tips werden nur sichtbar, wenn man mit dem Mousezeiger über den Pfeil (oben rechts) hovert – siehe Vorlage!

HTML

<head>

    <!-- hier den Link zu den Google-Fonts einfügen! -->
    <link rel="stylesheet" href="c/style.css">
</head>

Download

Ladet das Übungspaket hier herunter


Buchempfehlung: Web Typographie

A handbook for designing beautiful and effective responsive typography

http://www.book.webtypography.net/

Das Buch kostet £29.95 und in der eBook-Version £14.95


Danke!

Alle Scripte durchsuchen

Weitere Vorträge: