From 7a179278cedbe9aefe43e03ed9dbca6cb89102ba Mon Sep 17 00:00:00 2001
From: mdn-bot <108879845+mdn-bot@users.noreply.github.com>
Date: Tue, 4 Feb 2025 21:56:27 +0000
Subject: [PATCH] chore(de): translate diff [0a4d5b451c]
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Machine translation from English using gpt-4o-2024-08-06.

Source: https://github.com/mdn/content/commit/0a4d5b451cc54599ed2b99cef4fdd39c3fd96a3d

System prompt:

```md
You are tasked with translating MDN Web Docs content from English to German.

Ensure that the translation is accurate, preserves technical terminology, and follows the rules provided below.

# Rules for Translation

1. Format:

   - The input is a Markdown file.
   - The output should be a Markdown file.
   - Return the raw output, without wrapping it in a Markdown code block.
   - Keep GFM alert syntax untranslated, such as `> [!NOTE]`, `> [!WARNING]`, and `> [!CALLOUT]`.
   - If the input contains HTML tags wrapped in backticks (e.g. `<video>`), make sure they are wrapped in the output.
   - If the input contains HTML tags escaped with a slash (e.g. `\<length>`), make sure they are escaped in the output.

2. Language:

   - Prefer formal language ("Sie") over informal language ("du").

3. Code blocks:

   - Do not translate code blocks.
   - Do not translate terms wrapped in backticks.

4. Macro calls:

   - MDN uses macros for dynamic content insertion. These macros must remain **unchanged** and not translated.
   - Macro calls start with `{{`, followed by the macro name, optional parameters, and end with `}}`.
   - Avoid invalid macro calls by ensuring curly braces, parentheses, and quotes are closed properly.

5. Technical terms and code snippets in text:

   - Keep technical terms like element names, attributes, and method names in **English**. Only translate the surrounding descriptive text.

6. Links and References:

   - Translate link descriptions, but keep the URLs and their structure intact.
   - Do not change the locale in URLs.

7. Glossary:

   - "Browser compatibility" => "Browser-Kompatibilität"
   - "Guide" => "Leitfaden"
   - "How to" => "Anleitung"

# Translation Scope

Translate the following Markdown content from **English** to **German** while adhering to the rules above.
```
---
 .../core/css_layout/flexbox/index.md          | 781 +++++++++++++++---
 .../adding_interactivity/index.md             | 226 +++--
 .../publishing_your_website/index.md          | 100 +--
 .../textbaseline/index.md                     |  20 +-
 .../web/api/css_painting_api/guide/index.md   | 178 ++--
 files/de/web/api/css_painting_api/index.md    |  34 +-
 .../web/api/htmlimageelement/loading/index.md |  49 +-
 .../web/api/paintrenderingcontext2d/index.md  | 186 +++++
 .../web/api/paintworkletglobalscope/index.md  |  25 +-
 files/de/web/api/textmetrics/index.md         |  40 +-
 files/de/web/css/alignment-baseline/index.md  |  32 +-
 files/de/web/css/clip-path/index.md           |  55 +-
 .../css/color-interpolation-filters/index.md  |  18 +-
 files/de/web/css/color-interpolation/index.md |  17 +-
 files/de/web/css/color/index.md               |  29 +-
 files/de/web/css/content-visibility/index.md  |  64 +-
 files/de/web/css/cursor/index.md              | 137 +--
 files/de/web/css/direction/index.md           |  31 +-
 files/de/web/css/display/index.md             | 185 ++---
 files/de/web/css/dominant-baseline/index.md   |  50 +-
 files/de/web/css/filter/index.md              |  59 +-
 files/de/web/css/font-family/index.md         |  49 +-
 files/de/web/css/font-size-adjust/index.md    |  62 +-
 files/de/web/css/font-size/index.md           |  61 +-
 files/de/web/css/font-stretch/index.md        |  43 +-
 files/de/web/css/font-style/index.md          |  31 +-
 files/de/web/css/font-variant/index.md        |  39 +-
 files/de/web/css/font-weight/index.md         |  75 +-
 files/de/web/css/height/index.md              |  31 +-
 files/de/web/css/letter-spacing/index.md      |  23 +-
 files/de/web/css/mask/index.md                |  25 +-
 files/de/web/css/overflow/index.md            |  47 +-
 files/de/web/css/pointer-events/index.md      |  57 +-
 files/de/web/css/rx/index.md                  |  47 +-
 files/de/web/css/ry/index.md                  |  51 +-
 files/de/web/css/text-decoration/index.md     |  29 +-
 .../web/css/text-underline-position/index.md  |  26 +-
 files/de/web/css/transform-origin/index.md    |  57 +-
 files/de/web/css/transform/index.md           |  42 +-
 files/de/web/css/unicode-bidi/index.md        |  21 +-
 files/de/web/css/visibility/index.md          |  25 +-
 files/de/web/css/width/index.md               |  43 +-
 files/de/web/css/word-spacing/index.md        |  13 +-
 files/de/web/css/writing-mode/index.md        |  40 +-
 .../svg/attribute/alignment-baseline/index.md |  45 +-
 .../de/web/svg/attribute/alphabetic/index.md  |  10 +-
 files/de/web/svg/attribute/clip-path/index.md |  16 +-
 .../attribute/color-interpolation/index.md    |  26 +-
 files/de/web/svg/attribute/color/index.md     |  16 +-
 files/de/web/svg/attribute/cursor/index.md    |  14 +-
 files/de/web/svg/attribute/direction/index.md |  14 +-
 files/de/web/svg/attribute/display/index.md   |  32 +-
 .../web/svg/attribute/fill-opacity/index.md   |  11 +-
 files/de/web/svg/attribute/fill-rule/index.md |  18 +-
 files/de/web/svg/attribute/fill/index.md      |  50 +-
 files/de/web/svg/attribute/filter/index.md    |  14 +-
 .../de/web/svg/attribute/flood-color/index.md |   9 +-
 .../web/svg/attribute/flood-opacity/index.md  |  12 +-
 .../de/web/svg/attribute/font-family/index.md |  14 +-
 .../svg/attribute/font-size-adjust/index.md   |  14 +-
 files/de/web/svg/attribute/font-size/index.md |  12 +-
 .../web/svg/attribute/font-stretch/index.md   |   8 +-
 .../de/web/svg/attribute/font-style/index.md  |  10 +-
 .../web/svg/attribute/font-variant/index.md   |  10 +-
 .../de/web/svg/attribute/font-weight/index.md |  14 +-
 files/de/web/svg/attribute/height/index.md    | 102 +--
 .../svg/attribute/image-rendering/index.md    |  14 +-
 .../web/svg/attribute/letter-spacing/index.md |  14 +-
 .../web/svg/attribute/lighting-color/index.md |   9 +-
 files/de/web/svg/attribute/mask/index.md      |  12 +-
 files/de/web/svg/attribute/opacity/index.md   |  16 +-
 files/de/web/svg/attribute/overflow/index.md  |  24 +-
 .../web/svg/attribute/pointer-events/index.md |  14 +-
 files/de/web/svg/attribute/r/index.md         |  36 +-
 files/de/web/svg/attribute/rx/index.md        |  26 +-
 files/de/web/svg/attribute/ry/index.md        |  22 +-
 .../svg/attribute/stroke-dasharray/index.md   |  14 +-
 .../svg/attribute/stroke-dashoffset/index.md  |  16 +-
 .../web/svg/attribute/stroke-linecap/index.md |  18 +-
 .../svg/attribute/stroke-linejoin/index.md    |  28 +-
 .../svg/attribute/stroke-miterlimit/index.md  |  16 +-
 .../web/svg/attribute/stroke-opacity/index.md |  22 +-
 .../web/svg/attribute/stroke-width/index.md   |  12 +-
 files/de/web/svg/attribute/stroke/index.md    |  24 +-
 .../svg/attribute/text-decoration/index.md    |  18 +-
 .../web/svg/attribute/text-rendering/index.md |  18 +-
 .../svg/attribute/transform-origin/index.md   |  42 +-
 files/de/web/svg/attribute/transform/index.md |  32 +-
 .../web/svg/attribute/unicode-bidi/index.md   |  12 +-
 .../web/svg/attribute/v-alphabetic/index.md   |   8 +-
 .../de/web/svg/attribute/visibility/index.md  |  22 +-
 files/de/web/svg/attribute/width/index.md     | 122 +--
 .../web/svg/attribute/writing-mode/index.md   |   8 +-
 files/de/web/svg/attribute/x/index.md         |  97 +--
 files/de/web/svg/attribute/y/index.md         |  96 +--
 95 files changed, 2667 insertions(+), 1869 deletions(-)
 create mode 100644 files/de/web/api/paintrenderingcontext2d/index.md

diff --git a/files/de/learn_web_development/core/css_layout/flexbox/index.md b/files/de/learn_web_development/core/css_layout/flexbox/index.md
index ef3ae6d2c..b484aaa8e 100644
--- a/files/de/learn_web_development/core/css_layout/flexbox/index.md
+++ b/files/de/learn_web_development/core/css_layout/flexbox/index.md
@@ -2,36 +2,38 @@
 title: Flexbox
 slug: Learn_web_development/Core/CSS_layout/Flexbox
 l10n:
-  sourceCommit: ea832563653731a7bf7c0b74ec33dd436635807d
+  sourceCommit: 9709687fcb0f0ac83f859c80f118b87980191659
 ---
 
 {{LearnSidebar}}
 
 {{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Positioning", "Learn_web_development/Core/CSS_layout/Grids", "Learn_web_development/Core/CSS_layout")}}
 
-[Flexbox](/de/docs/Web/CSS/CSS_flexible_box_layout) ist eine ein-dimensionale Layout-Methode zur Anordnung von Elementen in Zeilen oder Spalten. Elemente _flektieren_ (erweitern sich), um zusätzlichen Platz zu füllen, oder schrumpfen, um in kleinere Räume zu passen. Dieser Artikel erklärt alle grundlegenden Konzepte.
+[Flexbox](/de/docs/Web/CSS/CSS_flexible_box_layout) ist eine eindimensionale Layoutmethode zur Anordnung von Elementen in Reihen oder Spalten. Elemente _flexen_ (dehnen sich aus), um zusätzlichen Raum zu füllen oder schrumpfen, um in kleinere Räume zu passen. Dieser Artikel erklärt alle Grundlagen.
 
 <table>
   <tbody>
     <tr>
       <th scope="row">Voraussetzungen:</th>
       <td>
-        <a href="/de/docs/Learn_web_development/Core/Structuring_content">Strukturierung von Inhalten mit HTML</a>,
-        <a href="/de/docs/Learn_web_development/Core/Styling_basics">CSS Styling Grundlagen</a>,
-        <a href="/de/docs/Learn_web_development/Core/Text_styling/Fundamentals">Grundlegende Text- und Schriftgestaltung</a>,
-        Vertrautheit mit <a href="/de/docs/Learn_web_development/Core/CSS_layout/Introduction">CSS-Layout-Grundkonzepten</a>.
+        <a href="/de/docs/Learn_web_development/Core/Structuring_content"
+          >Strukturieren von Inhalten mit HTML</a
+        >,
+        <a href="/de/docs/Learn_web_development/Core/Styling_basics">Grundlagen der CSS Gestaltung</a>,
+        <a href="/de/docs/Learn_web_development/Core/Text_styling/Fundamentals">Grundlegendes Styling von Text und Schriftarten</a>,
+        Vertrautheit mit <a href="/de/docs/Learn_web_development/Core/CSS_layout/Introduction">Grundkonzepten von CSS-Layouts</a>.
       </td>
     </tr>
     <tr>
       <th scope="row">Lernziele:</th>
       <td>
         <ul>
-          <li>Der Zweck von Flexbox — eine flexible Anordnung einer Reihe von Block- oder Inline-Elementen in einer Dimension.</li>
-          <li>Flex-Terminologie — Flex-Container, Flex-Element, Hauptachse und Querachse.</li>
-          <li>Verständnis, was <code>display: flex</code> Ihnen standardmäßig bietet.</li>
-          <li>Wie man Inhalte auf neue Zeilen und Spalten erweitert.</li>
-          <li>Flexible Größenanpassung und Reihenfolge von Flex-Elementen.</li>
-          <li>Inhalte rechtfertigen und ausrichten.</li>
+          <li>Der Zweck von Flexbox — ein flexibles Layout einer Reihe von Block- oder Inline-Elementen in einer Dimension erstellen.</li>
+          <li>Flex-Terminologie — Flex-Container, Flex-Element, Hauptachse und Nebenachse.</li>
+          <li>Verstehen, was <code>display: flex</code> standardmäßig bietet.</li>
+          <li>Wie man Inhalte auf neue Reihen und Spalten verteilt.</li>
+          <li>Flexible Größenanpassung und Anordnung von Flex-Elementen.</li>
+          <li>Rechtfertigen und Ausrichten von Inhalten.</li>
         </ul>
       </td>
     </tr>
@@ -40,60 +42,152 @@ l10n:
 
 ## Warum Flexbox?
 
-CSS Flexible Box Layout ermöglicht Ihnen:
-
-- Einen Block von Inhalten vertikal im übergeordneten Element zu zentrieren.
-- Alle Kinder eines Containers nehmen den gleichen Betrag an verfügbarer Breite/Höhe ein, unabhängig davon, wie viel Breite/Höhe verfügbar ist.
-- Alle Spalten in einem mehrspaltigen Layout übernehmen die gleiche Höhe, auch wenn sie eine unterschiedliche Menge an Inhalten enthalten.
-
-Flexbox-Funktionen können die perfekte Lösung für Ihre ein-dimensionale Layout-Anforderungen sein. Lassen Sie uns genauer hinschauen!
-
-## Ein einfaches Beispiel einführen
-
-In diesem Artikel werden Sie eine Reihe von Übungen durchgehen, um zu verstehen, wie Flexbox funktioniert. Um anzufangen, sollten Sie eine lokale Kopie der ersten Starterdatei erstellen — [flexbox0.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox0.html) aus unserem GitHub-Repo. Laden Sie es in einen modernen Browser (wie Firefox oder Chrome) und sehen Sie sich den Code in Ihrem Code-Editor an. Sie können es auch [hier live sehen](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html).
-
-![Bild zur Darstellung des Startpunkts des Flexbox-Tutorials](bih741v.png)
+Das CSS-Flexible-Box-Layout ermöglicht es Ihnen:
+
+- Ein Blockelement vertikal im Inneren seines übergeordneten Elements zu zentrieren.
+- Alle Kinder eines Containers so einzurichten, dass sie unabhängig von der verfügbaren Breite/Höhe die gleiche Menge an verfügbarer Breite/Höhe einnehmen.
+- Alle Spalten in einem mehrspaltigen Layout auf die gleiche Höhe zu bringen, auch wenn sie unterschiedliche Inhaltsmengen enthalten.
+
+Die Features von Flexbox können die perfekte Lösung für Ihre Anforderungen an ein eindimensionales Layout sein. Lassen Sie uns eintauchen und es herausfinden!
+
+## Einführung in ein einfaches Beispiel
+
+In diesem Artikel arbeiten Sie an einer Reihe von Übungen, die Ihnen helfen sollen zu verstehen, wie Flexbox funktioniert. Um zu beginnen, sollten Sie eine lokale Kopie des HTML und CSS erstellen. Laden Sie es in einen modernen Browser (wie Firefox oder Chrome) und sehen Sie sich den Code in Ihrem Code-Editor an. Alternativ können Sie das Beispiel in {{LiveSampleLink("flexbox_0", "dem Playground öffnen")}}.
+
+```html live-sample___flexbox_0
+<header>
+  <h1>Sample flexbox example</h1>
+</header>
+<section>
+  <article>
+    <h2>First article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Second article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Third article</h2>
+    <p>Content…</p>
+  </article>
+</section>
+```
 
-Sie werden sehen, dass wir ein {{htmlelement("header")}}-Element mit einer übergeordneten Überschrift darin und ein {{htmlelement("section")}}-Element mit drei {{htmlelement("article")}}s haben. Wir werden diese verwenden, um ein ziemlich standardmäßiges dreispaltiges Layout zu erstellen.
+```css live-sample___flexbox_0
+body {
+  font-family: sans-serif;
+  margin: 0;
+}
+header {
+  background: purple;
+  height: 100px;
+}
+h1 {
+  text-align: center;
+  color: white;
+  line-height: 100px;
+  margin: 0;
+}
+section {
+  zoom: 0.8;
+}
+article {
+  padding: 10px;
+  margin: 10px;
+  background: aqua;
+}
+/* Add your flexbox CSS below here */
+```
 
-## Festlegen von Elementen, die als flexible Boxen angeordnet werden sollen
+{{EmbedLiveSample("flexbox_0", "100", "415")}}
+
+Sie werden sehen, dass wir ein {{htmlelement("header")}}-Element mit einer Überschrift der obersten Ebene darin haben und ein {{htmlelement("section")}}-Element, das drei {{htmlelement("article")}}-Elemente enthält. Wir werden diese verwenden, um ein ziemlich standardmäßiges dreispaltiges Layout zu erstellen.
+
+## Bestimmen, welche Elemente als flexible Boxen gestaltet werden sollen
+
+Zunächst müssen wir auswählen, welche Elemente als flexible Boxen gestaltet werden sollen. Dazu setzen wir einen speziellen Wert von {{cssxref("display")}} auf das übergeordnete Element der Elemente, die Sie beeinflussen möchten. In diesem Fall möchten wir die {{htmlelement("article")}}-Elemente layouten, daher setzen wir dies auf die {{htmlelement("section")}}:
+
+```html hidden live-sample___flexbox_1
+<header>
+  <h1>Sample flexbox example</h1>
+</header>
+<section>
+  <article>
+    <h2>First article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Second article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Third article</h2>
+    <p>Content…</p>
+  </article>
+</section>
+```
 
-Zuerst müssen wir auswählen, welche Elemente als flexible Boxen angeordnet werden sollen. Dazu setzen wir einen speziellen Wert von {{cssxref("display")}} auf das übergeordnete Element der Elemente, die Sie beeinflussen möchten. In diesem Fall möchten wir die {{htmlelement("article")}}-Elemente anordnen, also setzen wir dies auf das {{htmlelement("section")}}:
+```css hidden live-sample___flexbox_1
+body {
+  font-family: sans-serif;
+  margin: 0;
+}
+header {
+  background: purple;
+  height: 100px;
+}
+h1 {
+  text-align: center;
+  color: white;
+  line-height: 100px;
+  margin: 0;
+}
+section {
+  zoom: 0.8;
+}
+article {
+  padding: 10px;
+  margin: 10px;
+  background: aqua;
+}
+/* Add your flexbox CSS below here */
+```
 
-```css
+```css live-sample___flexbox_1
 section {
   display: flex;
 }
 ```
 
-Dies führt dazu, dass das `<section>`-Element ein **Flex-Container** wird und seine Kinder werden **Flex-Elemente**. Und so sieht es aus:
+Dies hat zur Folge, dass das `<section>`-Element zu einem **Flex-Container** wird und seine Kinder zu **Flex-Elementen** werden. So sieht es aus:
 
-![Ein zweizeiliger Behälter, der eine einzelne Spalte in der ersten Zeile und ein 3-Spalten-Layout in der zweiten Zeile enthält, welches zeigt, wie eine Webseite in verschiedene Layouts je nach dem Inhalt geteilt werden kann.](flexbox-example2.png)
+{{EmbedLiveSample("flexbox_1", "100", "210")}}
 
-Diese einzelne Deklaration gibt uns alles, was wir brauchen. Unglaublich, oder? Wir haben ein mehrspaltiges Layout mit gleichgroßen Spalten, und die Spalten sind alle gleich hoch. Das liegt daran, dass die Standardwerte, die Flex-Elementen (den Kindern des Flex-Containers) zugewiesen werden, so eingestellt sind, dass sie häufige Probleme wie dieses lösen.
+Diese einzelne Deklaration gibt uns alles, was wir brauchen. Unglaublich, richtig? Wir haben ein mehrspaltiges Layout mit gleichgroßen Spalten, und die Spalten haben alle die gleiche Höhe. Dies liegt daran, dass die Standardwerte, die Flex-Elementen (den Kindern des Flex-Containers) zugewiesen werden, so eingestellt sind, dass häufige Probleme wie dieses gelöst werden.
 
-Lassen Sie uns wiederholen, was hier passiert. Wenn Sie einem Element einen {{cssxref("display")}}-Wert von `flex` hinzufügen, wird es zu einem Flex-Container. Der Container wird als {{Glossary("Block-level_content", "Block-Level-Inhalt")}} angezeigt, wie er mit dem Rest der Seite interagiert. Wenn das Element in einen Flex-Container umgewandelt wird, werden seine Kinder in Flex-Elemente umgewandelt (und angeordnet) bzw. als solche.
+Lassen Sie uns zusammenfassen, was hier passiert. Das Hinzufügen eines {{cssxref("display")}}-Werts von `flex` zu einem Element macht es zu einem Flex-Container. Der Container wird in Bezug auf die Interaktion mit dem Rest der Seite als {{Glossary("Block-level_content", "Block-Content auf Blockebene")}} angezeigt. Wenn das Element in einen Flex-Container umgewandelt wird, werden seine Kinder in Flex-Elemente umgewandelt (und als solche layoutet).
 
-Sie können den Container inline machen, indem Sie einen [außenliegenden `display`-Wert](/de/docs/Web/CSS/display#outside) verwenden (z.B. `display: inline flex`), der beeinflusst, wie der Container selbst auf der Seite angeordnet wird. Der alte `inline-flex` Display-Wert zeigt den Container ebenfalls inline an. Wir konzentrieren uns in diesem Tutorial darauf, wie sich die Inhalte des Containers verhalten, aber wenn Sie den Effekt eines Inline- versus Blocklayouts sehen möchten, können Sie sich den [Wertvergleich](/de/docs/Web/CSS/display#display_value_comparison) auf der `display`-Eigenschaftsseite ansehen.
+Sie können den Container inline gestalten, indem Sie einen [outside `display` value](/de/docs/Web/CSS/display#outside) verwenden (z. B. `display: inline flex`), was beeinflusst, wie der Container selbst in der Seite layoutet wird. Der alte `inline-flex` Displaywert zeigt den Container ebenfalls inline an. Wir konzentrieren uns in diesem Tutorial darauf, wie sich die Inhalte des Containers verhalten, aber wenn Sie den Effekt von Inline- gegenüber Blocklayout sehen möchten, können Sie sich den [Wertvergleich anzeigen](/de/docs/Web/CSS/display#display_value_comparison) auf der Seite mit der `display`-Eigenschaft.
 
 Die nächsten Abschnitte erklären ausführlicher, was Flex-Elemente sind und was innerhalb eines Elements passiert, wenn Sie es zu einem Flex-Container machen.
 
-## Das Flexmodell
+## Das Flex-Modell
 
-Wenn Elemente als Flex-Elemente angeordnet sind, werden sie entlang zweier Achsen angeordnet:
+Wenn Elemente als Flex-Elemente layoutet werden, werden sie entlang von zwei Achsen layoutet:
 
-![Drei Flex-Elemente in einer links-nach-rechts-Sprache sind nebeneinander in einem Flex-Container angeordnet. Die Hauptachse — die Achse des Flex-Containers in der Richtung, in der die Flex-Elemente angeordnet sind — ist horizontal. Die Enden der Achse sind main-start und main-end, jeweils links und rechts. Die Querachse ist vertikal; senkrecht zur Hauptachse. Cross-start und cross-end sind oben bzw. unten. Die Länge des Flex-Elements entlang der Hauptachse, in diesem Fall die Breite, wird als Hauptgröße bezeichnet, und die Länge des Flex-Elements entlang der Querachse, in diesem Fall die Höhe, wird als Quergroße bezeichnet.](flex_terms.png)
+![Drei Flex-Elemente in einer von links nach rechts lesenden Sprache sind nebeneinander in einem Flex-Container layoutet. Die Hauptachse — die Achse des Flex-Containers in der Richtung, in der die Flex-Elemente layoutet sind — ist horizontal. Die Enden der Achse sind Hauptanfang und Hauptende und befinden sich jeweils links und rechts. Die Querachse ist vertikal; senkrecht zur Hauptachse. Der Queranfang und das Querende befinden sich oben und unten. Die Länge des Flex-Elements entlang der Hauptachse, in diesem Fall die Breite, wird als Hauptgröße bezeichnet und die Länge des Flex-Elements entlang der Querachse, in diesem Fall die Höhe, wird als Quergröße bezeichnet.](flex_terms.png)
 
-- Die **Hauptachse** ist die Achse, die in der Richtung verläuft, in der die Flex-Elemente angeordnet sind (z.B. als eine Zeile über die Seite oder eine Spalte nach unten auf der Seite). Der Anfang und das Ende dieser Achse werden als **main start** und **main end** bezeichnet. Die Länge von der main-start-Kante zur main-end-Kante ist die **Hauptgröße**.
-- Die **Querachse** ist die Achse, die senkrecht zur Richtung verläuft, in der die Flex-Elemente angeordnet sind. Der Anfang und das Ende dieser Achse werden als **cross start** und **cross end** bezeichnet. Die Länge von der cross-start-Kante zur cross-end-Kante ist die **Quergroße**.
-- Das übergeordnete Element, auf dem `display: flex` gesetzt ist (das {{htmlelement("section")}} in unserem Beispiel), wird als **Flex-Container** bezeichnet.
-- Die Elemente, die als flexible Boxen innerhalb des Flex-Containers angeordnet sind, werden als **Flex-Elemente** bezeichnet (die {{htmlelement("article")}}-Elemente in unserem Beispiel).
+- Die **Hauptachse** ist die Achse, die in der Richtung verläuft, in der die Flex-Elemente layoutet sind (z. B. als Reihe über die Seite, oder eine Spalte nach unten auf der Seite). Anfang und Ende dieser Achse werden als **Hauptanfang** und **Hauptende** bezeichnet. Die Länge von der Hauptanfang-Kante zur Hauptende-Kante ist die **Hauptgröße**.
+- Die **Querachse** ist die Achse, die senkrecht zur Richtung verläuft, in der die Flex-Elemente layoutet sind. Anfang und Ende dieser Achse werden als **Queranfang** und **Querende** bezeichnet. Die Länge von der Queranfang-Kante zur Querende-Kante ist die **Quergröße**.
+- Das übergeordnete Element, das `display: flex` darauf gesetzt hat (das {{htmlelement("section")}} in unserem Beispiel), wird als **Flex-Container** bezeichnet.
+- Die Elemente, die als flexible Boxen innerhalb des Flex-Containers layoutet werden, werden als **Flex-Elemente** bezeichnet (die {{htmlelement("article")}}-Elemente in unserem Beispiel).
 
-Beachten Sie diese Terminologie, während Sie die folgenden Abschnitte durchgehen. Sie können jederzeit darauf zurückgreifen, wenn Sie bei einem der verwendeten Begriffe verwirrt sind.
+Beachten Sie diese Terminologie, wenn Sie die folgenden Abschnitte durchgehen. Sie können jederzeit darauf zurückgreifen, wenn Sie mit einem der verwendeten Begriffe verwirrt sind.
 
 ## Spalten oder Reihen?
 
-Flexbox bietet eine Eigenschaft namens {{cssxref("flex-direction")}}, die angibt, in welche Richtung die Hauptachse verläuft (in welche Richtung die Flexbox-Kinder angeordnet werden). Standardmäßig ist dies auf `row` eingestellt, was dazu führt, dass sie in einer Zeile in der Richtung angeordnet werden, in der die Standardsprache Ihres Browsers funktioniert (von links nach rechts im Fall eines englischen Browsers).
+Flexbox bietet eine Eigenschaft namens {{cssxref("flex-direction")}}, die angibt, in welche Richtung die Hauptachse verläuft (in welche Richtung die Flexbox-Kinder layoutet sind). Standardmäßig ist dies auf `row` gesetzt, was dazu führt, dass sie in einer Reihe in der Richtung angeordnet sind, in der die Standardsprache Ihres Browsers arbeitet (von links nach rechts im Fall eines englischen Browsers).
 
 Versuchen Sie, die folgende Deklaration zu Ihrer {{htmlelement("section")}}-Regel hinzuzufügen:
 
@@ -101,119 +195,434 @@ Versuchen Sie, die folgende Deklaration zu Ihrer {{htmlelement("section")}}-Rege
 flex-direction: column;
 ```
 
-Sie werden sehen, dass dies die Elemente wieder in ein Spaltenlayout zurückversetzt, ähnlich wie sie waren, bevor wir CSS hinzugefügt haben. Bevor Sie weitermachen, löschen Sie diese Deklaration aus Ihrem Beispiel.
+Sie werden sehen, dass dies die Elemente wieder in ein Spaltenlayout versetzt, ähnlich wie sie waren, bevor wir CSS hinzugefügt haben. Bevor Sie fortfahren, löschen Sie diese Deklaration aus Ihrem Beispiel.
 
 > [!NOTE]
-> Sie können Flex-Elemente auch in umgekehrter Richtung anordnen, indem Sie die Werte `row-reverse` und `column-reverse` verwenden. Experimentieren Sie auch mit diesen Werten!
+> Sie können Flex-Elemente auch in umgekehrter Richtung mit den Werten `row-reverse` und `column-reverse` anordnen. Experimentieren Sie auch mit diesen Werten!
 
 ## Umbruch
 
-Ein Problem, das auftritt, wenn Sie eine feste Breite oder Höhe in Ihrem Layout haben, ist, dass Ihre Flexbox-Kinder schließlich ihren Container überlaufen und das Layout brechen. Sehen Sie sich unser [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox-wrap0.html) Beispiel an und versuchen Sie es [live anzusehen](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (nehmen Sie jetzt eine lokale Kopie dieser Datei, wenn Sie diesem Beispiel folgen möchten):
+Ein Problem, das auftritt, wenn Sie eine feste Breite oder Höhe in Ihrem Layout haben, ist, dass Ihre Flexbox-Kinder schließlich ihren Container überlaufen und das Layout zerstören. Im folgenden Beispiel haben wir 5 {{htmlelement("article")}}-Elemente, die nicht passen, weil sie eine `min-width` von `400px` haben, sodass es einen horizontalen Bildlauf gibt.
+
+```html hidden live-sample___flex-wrap_0
+<header>
+  <h1>Sample flexbox example</h1>
+</header>
+<section>
+  <article>
+    <h2>First article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Second article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Third article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Fourth article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Fifth article</h2>
+    <p>Content…</p>
+  </article>
+</section>
+```
 
-![Das Beispiel mit Flexbox hat alle Flex-Elemente in einer einzigen Zeile des Flex-Containers angeordnet. Das achte Flex-Element überläuft das Browserfenster, und die Seite hat sichtbare horizontale und vertikale Scrollleisten, da es nicht innerhalb der Breite des Fensters untergebracht werden kann, da die vorherigen sieben Flex-Elemente den Platz im Ansichtsfenster eingenommen haben.](flexbox-example3.png)
+```css hidden live-sample___flex-wrap_0
+body {
+  font-family: sans-serif;
+  margin: 0;
+}
+header {
+  background: purple;
+  height: 100px;
+}
+h1 {
+  text-align: center;
+  color: white;
+  line-height: 100px;
+  margin: 0;
+}
+article {
+  min-width: 400px;
+  padding: 10px;
+  margin: 10px;
+  background: aqua;
+}
+section {
+  display: flex;
+  flex-direction: row;
+  zoom: 0.8;
+}
+```
 
-Hier sehen wir, dass die Kinder tatsächlich aus ihrem Container ausbrechen. Standardmäßig versucht der Browser, alle Flex-Elemente in einer einzigen Zeile anzuordnen, wenn die `flex-direction` auf `row` eingestellt ist, oder in einer einzigen Spalte, wenn die `flex-direction` auf `column` eingestellt ist. Eine Möglichkeit, dies zu beheben, besteht darin, die folgende Deklaration zu Ihrer {{htmlelement("section")}}-Regel hinzuzufügen:
+{{EmbedLiveSample("flex-wrap_0", "100", "230")}}
+
+Hier sehen wir, dass die Kinder tatsächlich aus ihrem Container ausbrechen. Standardmäßig versucht der Browser, alle Flex-Elemente in eine einzelne Reihe zu platzieren, wenn die `flex-direction` auf `row` gesetzt ist, oder in eine einzelne Spalte, wenn die `flex-direction` auf `column` gesetzt ist.
+
+```html hidden live-sample___flex-wrap_1
+<header>
+  <h1>Sample flexbox example</h1>
+</header>
+<section>
+  <article>
+    <h2>First article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Second article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Third article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Fourth article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Fifth article</h2>
+    <p>Content…</p>
+  </article>
+</section>
+```
 
-```css
-flex-wrap: wrap;
+```css hidden live-sample___flex-wrap_1
+body {
+  font-family: sans-serif;
+  margin: 0;
+}
+header {
+  background: purple;
+  height: 100px;
+}
+h1 {
+  text-align: center;
+  color: white;
+  line-height: 100px;
+  margin: 0;
+}
+article {
+  min-width: 400px;
+  padding: 10px;
+  margin: 10px;
+  background: aqua;
+}
+section {
+  display: flex;
+  flex-direction: row;
+  zoom: 0.8;
+}
 ```
 
-Mit dieser Regel geben wir jeder `article` ein spezifisches Maß, das sicherstellt, dass sie innerhalb des Containers gut angeordnet ist, wenn sie sich nebeneinander befinden. Fügen Sie nun die folgende Deklaration zu Ihrer {{htmlelement("article")}}-Regel hinzu:
+Eine Möglichkeit, dies zu beheben, besteht darin, die folgende Deklaration zu Ihrer {{htmlelement("section")}}-Regel hinzuzufügen:
 
-```css
-flex: 200px;
+```css live-sample___flex-wrap_1
+section {
+  flex-wrap: wrap;
+}
 ```
 
-Versuchen Sie das jetzt. Sie werden sehen, dass das Layout mit diesem Zusatz viel besser aussieht:
-
-![Die Flex-Elemente sind im Flex-Container in mehreren Zeilen angeordnet. Die `flex-wrap`-Eigenschaft ist im Flex-Container auf 'wrap' eingestellt, was die Flex-Elemente so anzeigt, dass sie in einer neuen Zeile erscheinen, wenn die Flex-Elemente in der vorherigen Zeile den Flexbox-Container überlaufen. Jedes Flex-Element erhält eine Breite von 200 Pixeln. Alle Elemente werden so gestreckt, dass sie die gleiche Höhe haben wie das Flex-Element mit dem meisten Inhalt.](flexbox-example6.png)
+Sie werden sehen, dass das Layout mit dieser enthaltenen Deklaration viel besser aussieht:
 
-Wir haben nun mehrere Zeilen. Jede Zeile hat so viele Flexbox-Kinder aufgenommen, wie es sinnvoll ist. Ein Überlauf wird auf die nächste Linie verschoben. Die `flex: 200px`-Deklaration, die auf die Artikel gesetzt wird, bedeutet, dass jedes mindestens `200px` breit sein wird. Diese Eigenschaft werden wir später noch detailliert besprechen. Vielleicht bemerken Sie auch, dass die letzten paar Kinder in der letzten Zeile jeweils breiter gemacht werden, sodass die gesamte Zeile immer noch gefüllt ist.
+{{EmbedLiveSample("flex-wrap_1", "100", "430")}}
 
-Aber es gibt noch mehr, was wir hier tun können. Versuchen Sie zunächst, Ihre {{cssxref("flex-direction")}}-Eigenschaft in `row-reverse` zu ändern. Jetzt sehen Sie, dass Sie immer noch Ihr mehrreihiges Layout haben, aber es beginnt in der gegenüberliegenden Ecke des Browserfensters und fließt umgekehrt. Das folgende Bild zeigt das aktualisierte Layout.
+Wir haben jetzt mehrere Reihen. Jede Reihe hat so viele Flexbox-Kinder, die hineinpassen, wie sinnvoll ist. Jeder Überlauf wird in die nächste Zeile verschoben. Die `flex: 200px` Deklaration, die auf die Artikel gesetzt ist, bedeutet, dass jedes mindestens `200px` breit sein wird. Wir werden diese Eigenschaft später im Detail besprechen. Sie könnten auch feststellen, dass die letzten Kinder in der letzten Reihe jeweils breiter gemacht werden, damit die gesamte Reihe noch gefüllt ist.
 
-![Die Flex-Elemente sind im Flex-Container in mehreren Reihen angeordnet, mit der `flex-direction`-Eigenschaft auf `row-reverse` eingestellt. Die Elemente fließen nun in umgekehrter Reihenfolge und beginnen am gegenüberliegenden Ende des Containers. Jede Zeile hat so viele Elemente wie möglich, wobei der Überlauf zur nächsten Zeile wandert.](flexbox-example4.png)
+Aber es gibt noch mehr, was wir hier tun können. Versuchen Sie zunächst, Ihren {{cssxref("flex-direction")}}-Eigenschaftswert auf `row-reverse` zu ändern. Jetzt werden Sie sehen, dass Sie immer noch Ihr mehrzeiliges Layout haben, aber es beginnt von der gegenüberliegenden Ecke des Browserfensters und fließt in umgekehrter Richtung. Das folgende Bild zeigt das aktualisierte Layout.
 
-## Flex-Flow Shorthand
+## flex-flow Kurzschreibweise
 
-An dieser Stelle sei erwähnt, dass es eine Kurzform für {{cssxref("flex-direction")}} und {{cssxref("flex-wrap")}} gibt: {{cssxref("flex-flow")}}. So können Sie zum Beispiel
+An diesem Punkt ist es erwähnenswert, dass es eine Kurzschreibweise für {{cssxref("flex-direction")}} und {{cssxref("flex-wrap")}} gibt: {{cssxref("flex-flow")}}. Sie können beispielsweise
 
 ```css
 flex-direction: row;
 flex-wrap: wrap;
 ```
 
-ersetzen durch
+durch
 
 ```css
 flex-flow: row wrap;
 ```
 
+< ersetzen.
+
 ## Flexible Größenanpassung von Flex-Elementen
 
-Lassen Sie uns nun zu unserem ersten Beispiel zurückkehren und sehen, wie wir steuern können, welchen Anteil des Platzes Flex-Elemente im Vergleich zu anderen Flex-Elementen einnehmen. Öffnen Sie Ihre lokale Kopie von [flexbox0.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox0.html), oder nehmen Sie eine Kopie von [flexbox1.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox1.html) als neuen Ausgangspunkt ([sehen Sie es live](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)).
+Kehren wir nun zu unserem ersten Beispiel zurück und sehen wir uns an, wie wir steuern können, welchen Anteil an Raum Flex-Elemente im Vergleich zu anderen Flex-Elementen einnehmen.
+
+```html hidden live-sample___flexbox_2
+<header>
+  <h1>Sample flexbox example</h1>
+</header>
+<section>
+  <article>
+    <h2>First article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Second article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Third article</h2>
+    <p>Content…</p>
+  </article>
+</section>
+```
 
-Fügen Sie zunächst die folgende Regel am Ende Ihres CSS hinzu:
+```css hidden live-sample___flexbox_2
+body {
+  font-family: sans-serif;
+  margin: 0;
+}
+header {
+  background: purple;
+  height: 100px;
+}
+h1 {
+  text-align: center;
+  color: white;
+  line-height: 100px;
+  margin: 0;
+}
+article {
+  padding: 10px;
+  margin: 10px;
+  background: aqua;
+}
+section {
+  zoom: 0.8;
+  display: flex;
+}
+```
 
-```css
+Fügen Sie in Ihrer lokalen Kopie die folgende Regel am Ende Ihres CSS hinzu:
+
+```css live-sample___flexbox_2
 article {
   flex: 1;
 }
 ```
 
-Dies ist ein einheitsloser Verhältniswert, der festlegt, wie viel verfügbaren Platz entlang der Hauptachse jedes Flex-Element im Vergleich zu anderen Flex-Elementen einnimmt. In diesem Fall geben wir jedem {{htmlelement("article")}}-Element den gleichen Wert (einen Wert von `1`), was bedeutet, dass sie alle den gleichen Anteil des verfügbaren Raumes einnehmen, der nach dem Setzen von Eigenschaften wie `padding` und `margin` übrig bleibt. Dieser Wert wird proportional unter den Flex-Elementen aufgeteilt: Wenn Sie jedem Flex-Element einen Wert von `400000` zuweisen würden, hätte dies exakt denselben Effekt.
+{{EmbedLiveSample("flexbox_2", "100", "210")}}
+
+Dies ist ein einheitenloser Proportionswert, der diktiert, wie viel Verfügungsraum entlang der Hauptachse jedes Flex-Element im Vergleich zu anderen Flex-Elementen einnehmen wird. In diesem Fall geben wir jedem {{htmlelement("article")}}-Element denselben Wert (einen Wert von `1`), was bedeutet, dass sie alle den selben Anteil des übrig gebliebenen Raums einnehmen, nachdem Eigenschaften wie Innenabstand und Rand gesetzt wurden. Dieser Wert wird proportional unter den Flex-Elementen geteilt: Wenn jedem Flex-Element ein Wert von `400000` gegeben würde, hätte dies genau den gleichen Effekt.
+
+```html hidden live-sample___flexbox_3
+<header>
+  <h1>Sample flexbox example</h1>
+</header>
+<section>
+  <article>
+    <h2>First article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Second article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Third article</h2>
+    <p>Content…</p>
+  </article>
+</section>
+```
+
+```css hidden live-sample___flexbox_3
+body {
+  font-family: sans-serif;
+  margin: 0;
+}
+header {
+  background: purple;
+  height: 100px;
+}
+h1 {
+  text-align: center;
+  color: white;
+  line-height: 100px;
+  margin: 0;
+}
+article {
+  padding: 10px;
+  margin: 10px;
+  background: aqua;
+}
+section {
+  zoom: 0.8;
+  display: flex;
+}
+article {
+  flex: 1;
+}
+```
 
-Nun fügen Sie die folgende Regel unter der vorherigen Regel hinzu:
+Fügen Sie nun die folgende Regel unter der vorherigen ein:
 
-```css
+```css live-sample___flexbox_3
 article:nth-of-type(3) {
   flex: 2;
 }
 ```
 
-Jetzt, wenn Sie die Seite aktualisieren, werden Sie sehen, dass das dritte {{htmlelement("article")}} doppelt so viel der verfügbaren Breite einnimmt wie die anderen beiden. Es stehen jetzt vier Verhältnis-Einheiten insgesamt zur Verfügung (da 1 + 1 + 2 = 4). Die ersten beiden Flex-Elemente haben jeweils eine Einheit, sodass sie jeweils 1/4 des verfügbaren Raumes einnehmen. Das dritte hat zwei Einheiten, sodass es 2/4 des verfügbaren Raumes einnimmt (oder eine Hälfte).
+{{EmbedLiveSample("flexbox_3", "100", "210")}}
+
+Jetzt, wenn Sie aktualisieren, werden Sie sehen, dass das dritte {{htmlelement("article")}} doppelt so viel der verfügbaren Breite einnimmt wie die anderen beiden. Es sind jetzt insgesamt vier Verhältnis-Einheiten verfügbar (da 1 + 1 + 2 = 4). Die ersten beiden Flex-Elemente haben jeweils eine Einheit, also nehmen sie jeweils 1/4 des verfügbaren Raums ein. Das dritte hat zwei Einheiten, daher nimmt es 2/4 des verfügbaren Raums ein (oder eine Hälfte).
+
+Sie können auch einen Minimalgrößenwert innerhalb des Flex-Werts angeben. Versuchen Sie, Ihre vorhandenen Artikel-Regeln wie folgt zu aktualisieren:
+
+```html hidden live-sample___flexbox_4
+<header>
+  <h1>Sample flexbox example</h1>
+</header>
+<section>
+  <article>
+    <h2>First article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Second article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Third article</h2>
+    <p>Content…</p>
+  </article>
+</section>
+```
 
-Sie können auch einen minimalen Größenwert innerhalb des Flex-Wertes angeben. Versuchen Sie, Ihre bestehenden Artikelregeln zu aktualisieren, wie folgt:
+```css hidden live-sample___flexbox_4
+body {
+  font-family: sans-serif;
+  margin: 0;
+}
+header {
+  background: purple;
+  height: 100px;
+}
+h1 {
+  text-align: center;
+  color: white;
+  line-height: 100px;
+  margin: 0;
+}
+article {
+  padding: 10px;
+  margin: 10px;
+  background: aqua;
+}
+section {
+  zoom: 0.8;
+  display: flex;
+}
+```
 
-```css
+```css live-sample___flexbox_4
 article {
-  flex: 1 200px;
+  flex: 1 100px;
 }
 
 article:nth-of-type(3) {
-  flex: 2 200px;
+  flex: 2 100px;
 }
 ```
 
-Dies besagt im Wesentlichen: "Jedes Flex-Element wird zuerst `200px` des vorhandenen Platzes erhalten. Danach wird der restliche verfügbare Raum entsprechend den Verhältnis-Einheiten aufgeteilt." Versuchen Sie, die Seite zu aktualisieren, und Sie werden einen Unterschied in der Verteilung des Raumes sehen.
+Dies besagt im Wesentlichen: "Jedes Flex-Element erhält zunächst `100px` des verfügbaren Raums. Danach wird der restliche verfügbare Raum entsprechend den Verhältnis-Einheiten verteilt." Sie werden einen Unterschied in der Aufteilung des Raums bemerken.
 
-![Ein Flex-Container mit drei Flex-Elementen. Das dritte Flex-Element ist leicht größer als die ersten beiden.](flexbox-example1.png)
+{{EmbedLiveSample("flexbox_4", "100", "210")}}
 
-Alle Flex-Elemente haben eine Mindestbreite von 200 Pixeln, die mit `flex` festgelegt ist. Der Wert von `flex` für die ersten beiden Flex-Elemente ist 1 und für das dritte Element 2. Dies teilt den verbleibenden Raum im Flex-Container in 4 Verhältnis-Einheiten auf. Eine Einheit wird jedem der ersten beiden Flex-Elemente zugewiesen und 2 Einheiten dem dritten Flex-Element, wodurch das dritte Flex-Element breiter wird als die anderen beiden, die die gleiche Breite haben.
+Alle Flex-Elemente haben eine Mindestbreite von 100 Pixeln — gesetzt mit 'flex'. Der Wert von Flex für die ersten beiden Flex-Elemente ist 1 und für das dritte Element ist 2. Dies teilt den verbleibenden Raum im Flex-Container in 4 Verhältnis-Einheiten auf. Eine Einheit wird jedem der ersten beiden Flex-Elemente zugeordnet, und 2 Einheiten werden dem dritten Flex-Element zugeordnet, sodass das dritte Flex-Element breiter ist als die anderen beiden, die die gleiche Breite haben.
 
-Der wahre Wert von Flexbox wird in seiner Flexibilität/Anpassungsfähigkeit gesehen. Wenn Sie das Browserfenster in der Größe ändern oder ein weiteres {{htmlelement("article")}}-Element hinzufügen, funktioniert das Layout weiterhin einwandfrei.
+Der wahre Wert von Flexbox zeigt sich in seiner Flexibilität/Anpassungsfähigkeit. Wenn Sie das Browserfenster ändern oder ein weiteres {{htmlelement("article")}}-Element hinzufügen, funktioniert das Layout weiter einwandfrei.
 
-## Flex: Shorthand gegenüber Langform
+## flex: Kurzschreibweise versus Langschreibweise
 
-{{cssxref("flex")}} ist eine Kurzform-Eigenschaft, die bis zu drei verschiedene Werte spezifizieren kann:
+{{cssxref("flex")}} ist eine Kurzschreibweise, die bis zu drei verschiedene Werte angeben kann:
 
-- Der diskussionswürdige einheitslose Verhältniswert. Dieser kann separat mit der Langform-Eigenschaft {{cssxref("flex-grow")}} angegeben werden.
-- Ein zweiter einheitsloser Verhältniswert, {{cssxref("flex-shrink")}}, der ins Spiel kommt, wenn die Flex-Elemente ihren Container überlaufen. Dieser Wert gibt an, wie stark ein Element schrumpfen wird, um einen Überlauf zu verhindern. Dies ist eine ziemlich fortgeschrittene Flexbox-Funktion und wird in diesem Artikel nicht weiter behandelt.
-- Der oben diskutierte minimale Größenwert. Dieser kann separat mit dem Langform-Wert {{cssxref("flex-basis")}} angegeben werden.
+- Der oben besprochene einheitenlose Proportionswert. Dieser kann separat mit der Langschreibweise {{cssxref("flex-grow")}} angegeben werden.
+- Ein zweiter einheitenloser Proportionswert, {{cssxref("flex-shrink")}}, der ins Spiel kommt, wenn die Flex-Elemente ihren Container überlaufen. Dieser Wert gibt an, wie stark ein Element schrumpfen wird, um ein Überlaufen zu verhindern. Dies ist ein ziemlich fortgeschrittenes Flexbox-Feature, das wir in diesem Artikel nicht weiter behandeln werden.
+- Der oben besprochene Minimalgrößenwert. Dieser kann separat mit dem Langschreibwert {{cssxref("flex-basis")}} angegeben werden.
 
-Es wird empfohlen, die Langform-Flex-Eigenschaften nur dann zu verwenden, wenn es wirklich notwendig ist (z.B. um etwas zuvor Festgelegtes zu überschreiben). Dies führt zu einer Menge zusätzlichen geschriebenen Codes und kann etwas verwirrend sein.
+Wir würden davon abraten, die Langschreib-Flex-Eigenschaften zu verwenden, es sei denn, es ist wirklich notwendig (zum Beispiel, um etwas zuvor festgelegtes zu überschreiben). Sie führen zu vielen zusätzlichen Codezeilen und können etwas verwirrend sein.
 
 ## Horizontale und vertikale Ausrichtung
 
-Sie können auch Flexbox-Funktionen verwenden, um Flex-Elemente entlang der Haupt- oder Querachse auszurichten. Lassen Sie uns dies erkunden, indem wir uns ein neues Beispiel ansehen: [flex-align0.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flex-align0.html) ([sehen Sie es auch live](https://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)). Wir werden dies in eine ordentliche, flexible Schaltflächen-/Symbolleiste umwandeln. Derzeit sehen Sie eine horizontale Menüleiste mit einigen in die obere linke Ecke gequetschten Schaltflächen.
+Sie können Flexbox-Features auch verwenden, um Flex-Elemente entlang der Haupt- oder Querachse auszurichten. Lassen Sie uns dies erkunden, indem wir uns ein neues Beispiel ansehen:
+
+```html live-sample___flex-align_0
+<div>
+  <button>Smile</button>
+  <button>Laugh</button>
+  <button>Wink</button>
+  <button>Shrug</button>
+  <button>Blush</button>
+</div>
+```
+
+```css live-sample___flex-align_0
+body {
+  font-family: sans-serif;
+  width: 90%;
+  max-width: 960px;
+  margin: 10px auto;
+}
+div {
+  height: 100px;
+  border: 1px solid black;
+}
+button {
+  font-size: 18px;
+  line-height: 1.5;
+  width: 15%;
+}
+/* Add your flexbox CSS below here */
+```
 
-![Fünf Schaltflächen sind in einer Reihe in einem Flex-Container angeordnet. Die Schaltflächen werden in die obere linke Ecke gequetscht, was nicht ordentlich aussieht.](flexbox-example5.png)
+Wir werden dies in eine saubere, flexible Schaltflächen-/Symbolleiste verwandeln. Derzeit sehen Sie eine horizontale Menüleiste mit einigen Schaltflächen, die in die obere linke Ecke gequetscht sind.
 
-Nehmen Sie zunächst eine lokale Kopie dieses Beispiels.
+{{EmbedLiveSample("flex-align_0", "100", "125")}}
 
-Fügen Sie nun das Folgende am Ende des CSS der Beispiele hinzu:
+Erstellen Sie zunächst eine lokale Kopie dieses Beispiels.
 
-```css
+Fügen Sie nun das Folgende am Ende des Beispiels-CSS hinzu:
+
+```html hidden live-sample___flex-align_1
+<div>
+  <button>Smile</button>
+  <button>Laugh</button>
+  <button>Wink</button>
+  <button>Shrug</button>
+  <button>Blush</button>
+</div>
+```
+
+```css hidden live-sample___flex-align_1
+body {
+  font-family: sans-serif;
+  width: 90%;
+  max-width: 960px;
+  margin: 10px auto;
+}
+div {
+  height: 100px;
+  border: 1px solid black;
+}
+button {
+  font-size: 18px;
+  line-height: 1.5;
+  width: 15%;
+}
+/* Add your flexbox CSS below here */
+```
+
+```css live-sample___flex-align_1
 div {
   display: flex;
   align-items: center;
@@ -221,46 +630,80 @@ div {
 }
 ```
 
-![Fünf Schaltflächen sind in einer Reihe in einem Flex-Container angeordnet. Die Flex-Elemente sind vertikal zentriert und horizontal gleichmäßig verteilt.](flexbox_center_space-around.png)
+{{EmbedLiveSample("flex-align_1", "100", "125")}}
 
-Aktualisieren Sie die Seite und Sie werden sehen, dass die Schaltflächen jetzt schön horizontal und vertikal zentriert sind. Wir haben dies über zwei neue Eigenschaften erreicht. Die Flex-Elemente sind durch das Setzen der `align-items`-Eigenschaft auf `center` in der Querachse zentriert. Die Flex-Elemente sind gleichmäßig entlang der Hauptachse durch das Setzen der `justify-content`-Eigenschaft auf `space-around` verteilt.
+Aktualisieren Sie die Seite und Sie werden sehen, dass die Schaltflächen jetzt schön horizontal und vertikal zentriert sind. Wir haben dies über zwei neue Eigenschaften erreicht. Die Flex-Elemente sind durch Setzen der `align-items`-Eigenschaft auf `center` an der Querachse zentriert positioniert. Die Flex-Elemente sind entlang der Hauptachse durch Setzen der `justify-content`-Eigenschaft auf `space-around` gleichmäßig verteilt.
 
-Die {{cssxref("align-items")}}-Eigenschaft steuert die Position der Flex-Elemente auf der Querachse.
+Die {{cssxref("align-items")}}-Eigenschaft steuert, wo die Flex-Elemente auf der Querachse sitzen.
 
-- Standardmäßig hat der Wert `normal`, der sich in Flexbox als `stretch` verhält. Dies streckt alle Flex-Elemente aus, um das Elternteil in Richtung der Querachse zu füllen. Wenn das Elternteil keine feste Größe in Richtung der Querachse hat, werden alle Flex-Elemente so groß wie das höchste (oder breiteste) Flex-Element. Dies ist, wie unser erstes Beispiel standardmäßig gleich hohe Spalten hatte.
-- Der `center`-Wert, den wir in unserem obigen Code verwendet haben, führt dazu, dass die Elemente ihre intrinsische Dimension beibehalten, jedoch in der Querachse zentriert sind. Daher sind in diesem Beispiel die Schaltflächen jetzt vertikal zentriert.
-- Sie können auch Werte wie `flex-start`, `self-start` oder `start` und `flex-end`, `self-end` oder `end` verwenden, um alle Elemente jeweils am Anfang und Ende der Querachse auszurichten. Die `baseline`-Werte richten die Flex-Elemente an ihrer Basislinie aus; im Wesentlichen wird der Boden jeder ersten Textzeile der Flex-Elemente mit dem Boden der ersten Zeile des Elements mit dem größten Abstand zwischen der Queranfang und dieser Basislinie ausgerichtet. Siehe {{cssxref("align-items")}} für die vollständigen Details.
+- Standardmäßig hat der Wert `normal`, der sich in Flexbox wie `stretch` verhält. Dadurch werden alle Flex-Elemente so gestreckt, dass sie die Eltern in Richtung der Querachse ausfüllen. Wenn das Elternteil keine feste Größe in Richtung der Querachse hat, werden alle Flex-Elemente so groß (oder breit) wie das höchste (oder breiteste) Flex-Element. Dies ist der Grund, warum unser erstes Beispiel standardmäßig Spalten mit gleicher Höhe hatte.
+- Der Wert `center`, den wir in unserem obigen Code verwendet haben, bewirkt, dass die Elemente ihre intrinsischen Abmessungen beibehalten, aber entlang der Querachse zentriert werden. Aus diesem Grund sind die Schaltflächen in unserem aktuellen Beispiel vertikal zentriert.
+- Sie können auch Werte wie `flex-start`, `self-start` oder `start` und `flex-end`, `self-end` oder `end` verwenden, die alle Elemente am Anfang bzw. Ende der Querachse ausrichten. Die `baseline`-Werte richten die Flex-Elemente anhand ihrer Grundlinie aus; im Grunde wird die Unterkante jeder ersten Textlinie des Flex-Elements an der Unterkante der ersten Linie des Elements mit dem größten Abstand zwischen dem Queranfang und dieser Grundlinie ausgerichtet. Siehe {{cssxref("align-items")}} für die vollständigen Details.
 
-Sie können das Verhalten von {{cssxref("align-items")}} für einzelne Flex-Elemente überschreiben, indem Sie ihnen die Eigenschaft {{cssxref("align-self")}} zuweisen. Fügen Sie zum Beispiel Folgendes zu Ihrem CSS hinzu:
+Sie können das Verhalten von {{cssxref("align-items")}} für einzelne Flex-Elemente überschreiben, indem Sie die {{cssxref("align-self")}}-Eigenschaft darauf anwenden. Fügen Sie zum Beispiel das Folgende zu Ihrem CSS hinzu:
 
-```css
+```html hidden live-sample___flex-align_2
+<div>
+  <button>Smile</button>
+  <button>Laugh</button>
+  <button>Wink</button>
+  <button>Shrug</button>
+  <button>Blush</button>
+</div>
+```
+
+```css hidden live-sample___flex-align_2
+body {
+  font-family: sans-serif;
+  width: 90%;
+  max-width: 960px;
+  margin: 10px auto;
+}
+div {
+  height: 100px;
+  border: 1px solid black;
+}
+button {
+  font-size: 18px;
+  line-height: 1.5;
+  width: 15%;
+}
+div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+/* Add your flexbox CSS below here */
+```
+
+```css live-sample___flex-align_2
 button:first-child {
   align-self: flex-end;
 }
 ```
 
-![Fünf Schaltflächen sind in einer Reihe in einem Flex-Container angeordnet. Alle Flex-Elemente außer dem ersten sind vertikal zentriert. Das erste Element liegt bündig an der unteren Seite des Flex-Containers und ist am Ende der Querachse ausgerichtet. Die Flex-Elemente sind gleichmäßig entlang der Hauptachse verteilt.](flexbox_first-child_flex-end.png)
+{{EmbedLiveSample("flex-align_2", "100", "125")}}
 
-Sehen Sie sich an, welche Auswirkungen dies hat, und entfernen Sie es wieder, wenn Sie fertig sind.
+Sehen Sie sich an, welchen Effekt dies hat, und entfernen Sie es wieder, wenn Sie fertig sind.
 
 {{cssxref("justify-content")}} steuert, wo die Flex-Elemente auf der Hauptachse sitzen.
 
-- Der Standardwert ist `normal`, was sich ähnlich wie `start` verhält, was bedeutet, dass alle Elemente am Anfang der Hauptachse sitzen.
-- Sie können `end` oder `flex-end` verwenden, um sie am Ende zu platzieren.
-- Die Werte `left` und `right` verhalten sich wie `start` oder `end`, abhängig von der Schreibrichtung.
-- `center` ist ebenfalls ein Wert für `justify-content`. Es bringt die Flex-Elemente in die Mitte der Hauptachse.
-- Der von uns oben verwendete Wert `space-around` ist nützlich, da er alle Elemente gleichmäßig entlang der Hauptachse mit etwas Platz an beiden Enden verteilt.
-- Es gibt einen weiteren Wert, `space-between`, der dem `space-around` sehr ähnlich ist, außer dass er keinen Platz an beiden Enden übrig lässt.
+- Der Standardwert ist `normal`, der sich wie `start` verhält, was dazu führt, dass alle Elemente am Anfang der Hauptachse sitzen.
+- Sie können `end` oder `flex-end` verwenden, um sie am Ende zu positionieren.
+- Die Werte `left` und `right` verhalten sich wie `start` oder `end`, abhängig von der Schreibrichtungsrichtung.
+- `center` ist ebenfalls ein Wert für `justify-content`. Dadurch werden die Flex-Elemente in der Mitte der Hauptachse positioniert.
+- Der von uns oben verwendete Wert `space-around` ist nützlich — er verteilt alle Elemente gleichmäßig entlang der Hauptachse und lässt an jedem Ende etwas Platz.
+- Es gibt noch einen anderen Wert, `space-between`, der dem `space-around` sehr ähnlich ist, außer dass er keinen Platz an den Enden lässt.
 
 Die [`justify-items`](/de/docs/Web/CSS/justify-items)-Eigenschaft wird in Flexbox-Layouts ignoriert.
 
-Wir möchten Sie ermutigen, mit diesen Werten zu experimentieren, um zu sehen, wie sie funktionieren, bevor Sie fortfahren.
+Wir würden Sie ermutigen, mit diesen Werten zu spielen, um zu sehen, wie sie funktionieren, bevor Sie fortfahren.
 
 ## Anordnung von Flex-Elementen
 
-Flexbox hat auch eine Funktion zum Ändern der Layout-Reihenfolge von Flex-Elementen, ohne die Quellreihenfolge zu beeinflussen. Dies ist eine weitere Sache, die mit traditionellen Layout-Methoden nicht möglich ist.
+Flexbox verfügt auch über eine Funktion zum Ändern der Layout-Richtung von Flex-Elementen, ohne die Quellreihenfolge zu beeinträchtigen. Dies ist etwas, das mit traditionellen Layout-Methoden unmöglich ist.
 
-Versuchen Sie, den folgenden CSS zu Ihrem Schaltflächenleisten-Beispiel hinzuzufügen:
+Versuchen Sie, den folgenden CSS zu Ihrem Schaltflächenleisten-Beispielcode hinzuzufügen:
 
 ```css
 button:first-child {
@@ -268,14 +711,14 @@ button:first-child {
 }
 ```
 
-Aktualisieren Sie die Seite, und Sie werden sehen, dass die "Smile"-Schaltfläche an das Ende der Hauptachse verschoben wurde. Lassen Sie uns im Detail darüber sprechen, wie das funktioniert:
+Aktualisieren Sie die Anzeige und Sie werden sehen, dass die Schaltfläche "Lächeln" an das Ende der Hauptachse verschoben wurde. Lassen Sie uns im Detail besprechen, wie dies funktioniert:
 
 - Standardmäßig haben alle Flex-Elemente einen {{cssxref("order")}}-Wert von `0`.
-- Flex-Elemente mit höheren Order-Werten erscheinen später in der Anzeigereihenfolge als Elemente mit niedrigeren Order-Werten.
-- Flex-Elemente mit demselben Order-Wert erscheinen in ihrer Quellreihenfolge. Wenn Sie also vier Elemente haben, deren Order-Werte als `2`, `1`, `1` und `0` festgesetzt sind, wäre die Anzeigereihenfolge 4., 2., 3. und dann 1..
-- Das 3. Element erscheint nach dem 2., da es denselben Order-Wert hat und in der Quellreihenfolge nach ihm kommt.
+- Flex-Elemente mit höheren angegebenen Ordnungswerten erscheinen später in der Anzeigereihenfolge als Elemente mit niedrigeren Ordnungswerten.
+- Flex-Elemente mit demselben Ordnungswert erscheinen in ihrer Quellreihenfolge. Wenn Sie beispielsweise vier Elemente haben, deren Ordnungswerte als `2`, `1`, `1` und `0` festgelegt wurden, wäre ihre Anzeigereihenfolge 4., 2., 3. und dann 1..
+- Das 3. Element erscheint nach dem 2., weil es den gleichen Ordnungswert hat und im Quellcode nach diesem steht.
 
-Sie können negative Order-Werte festlegen, um Elemente früher erscheinen zu lassen als Elemente mit dem Wert `0`. Zum Beispiel könnten Sie die "Blush"-Schaltfläche mit der folgenden Regel an den Anfang der Hauptachse setzen:
+Sie können negative Ordnungswerte festlegen, um Elemente früher erscheinen zu lassen als Elemente, deren Wert `0` ist. Beispielsweise könnten Sie die Schaltfläche "Erröten" durch die folgende Regel an den Anfang der Hauptachse stellen:
 
 ```css
 button:last-child {
@@ -283,15 +726,93 @@ button:last-child {
 }
 ```
 
-Während Sie die Reihenfolge mit `order` ändern können, bleibt die Tabulatorreihenfolge dieselbe wie die Code-Reihenfolge. Das Ändern der Reihenfolge von fokussierbaren Elementen kann die Benutzbarkeit für Ihre Tastaturnutzer negativ beeinflussen!
+Während Sie die Reihenfolge mit `order` ändern können, bleibt die Tabulatorreihenfolge gleich wie die Code-Reihenfolge. Das Ändern der Reihenfolge von fokussierbaren Elementen kann die Benutzbarkeit für Ihre Tastaturnutzer negativ beeinflussen!
 
 ## Verschachtelte Flexboxen
 
-Es ist möglich, einige ziemlich komplexe Layouts mit Flexbox zu erstellen. Es ist völlig in Ordnung, ein Flex-Element auch als Flex-Container zu setzen, sodass seine Kinder ebenfalls wie flexible Boxen angeordnet werden. Werfen Sie einen Blick auf [complex-flexbox.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/complex-flexbox.html) ([sehen Sie es auch live](https://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)).
+Es ist möglich, mit Flexbox einige ziemlich komplexe Layouts zu erstellen. Es ist vollkommen in Ordnung, ein Flex-Element so einzustellen, dass es auch ein Flex-Container ist, sodass seine Kinder ebenfalls wie flexible Boxen layoutet werden.
+
+```html hidden live-sample___flex-nesting
+<header>
+  <h1>Complex flexbox example</h1>
+</header>
+<section>
+  <article>
+    <h2>First article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <h2>Second article</h2>
+    <p>Content…</p>
+  </article>
+  <article>
+    <div>
+      <button>Smile</button>
+      <button>Laugh</button>
+      <button>Wink</button>
+      <button>Shrug</button>
+      <button>Blush</button>
+    </div>
+    <div>
+      <p>Paragraph one content…</p>
+    </div>
+    <div>
+      <p>Paragraph two content…</p>
+    </div>
+  </article>
+</section>
+```
+
+```css hidden live-sample___flex-nesting
+body {
+  font-family: sans-serif;
+  margin: 0;
+}
+header {
+  background: purple;
+  height: 100px;
+}
+h1 {
+  text-align: center;
+  color: white;
+  line-height: 100px;
+  margin: 0;
+}
+article {
+  padding: 10px;
+  margin: 10px;
+  background: aqua;
+}
+section {
+  display: flex;
+  zoom: 0.8;
+}
+article {
+  flex: 1 170px;
+}
+article:nth-of-type(3) {
+  flex: 3 170px;
+  display: flex;
+  flex-flow: column;
+}
+article:nth-of-type(3) div:first-child {
+  flex: 1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+```
 
-![Das Beispiel mit Flexbox hat drei Flex-Element-Kinder, die in einer Reihe angeordnet sind. Die ersten beiden haben die gleiche Breite, das dritte ist etwas breiter. Das dritte Flex-Element ist ebenfalls ein Flex-Container. Es hat eine Reihe von Schaltflächen in zwei Reihen, gefolgt von Text. Die erste Reihe von Schaltflächen hat 4 Schaltflächen, die in einer Reihe angeordnet sind; die Schaltflächen haben die gleiche Breite und nutzen die gesamte Breite des Containers aus. Die zweite Reihe hat eine einzelne Schaltfläche, die die gesamte Breite der Zeile allein einnimmt.](flexbox-example7.png)
+{{EmbedLiveSample("flex-nesting", "100", "290")}}
 
-Dieses komplexe Layout hat einige Flex-Elemente, die ebenfalls Flex-Container sind. Der HTML-Code dafür ist ziemlich einfach. Wir haben ein {{htmlelement("section")}}-Element, das drei {{htmlelement("article")}}s enthält. Das dritte {{htmlelement("article")}} enthält drei {{htmlelement("div")}}s, und das erste {{htmlelement("div")}} enthält fünf {{htmlelement("button")}}s:
+Dieses komplexe Layout hat einige Flex-Elemente, die auch Flex-Container sind. Der HTML-Code dafür ist ziemlich einfach. Wir haben ein {{htmlelement("section")}}-Element, das drei {{htmlelement("article")}}-Elemente enthält. Das dritte {{htmlelement("article")}} enthält drei {{htmlelement("div")}}s, und das erste {{htmlelement("div")}} enthält fünf {{htmlelement("button")}}s:
 
 ```plain
 section - article
@@ -303,9 +824,9 @@ section - article
                           button
 ```
 
-Schauen wir uns den Code an, den wir für das Layout verwendet haben.
+Lassen Sie uns den Code anschauen, den wir für das Layout verwendet haben.
 
-Zuerst legen wir fest, dass die Kinder des {{htmlelement("section")}} als flexible Boxen angeordnet werden.
+Zuerst legen wir fest, dass die Kinder des {{htmlelement("section")}} als flexible Boxen layoutet werden.
 
 ```css
 section {
@@ -313,21 +834,21 @@ section {
 }
 ```
 
-Als nächstes setzen wir einige Flex-Werte auf die {{htmlelement("article")}}s selbst. Beachten Sie insbesondere die zweite Regel hier: Wir setzen das dritte {{htmlelement("article")}} so, dass auch seine Kinder als Flex-Elemente angeordnet werden, aber dieses Mal legen wir sie als Spalte an.
+Als nächstes setzen wir einige Flex-Werte auf die {{htmlelement("article")}}-Elemente. Beachten Sie besonders die zweite Regel hier: Wir setzen das dritte {{htmlelement("article")}} so, dass seine Kinder ebenfalls wie Flex-Elemente layoutet werden, aber diesmal layouten wir sie wie eine Spalte.
 
 ```css
 article {
-  flex: 1 200px;
+  flex: 1 100px;
 }
 
 article:nth-of-type(3) {
-  flex: 3 200px;
+  flex: 3 100px;
   display: flex;
   flex-flow: column;
 }
 ```
 
-Als nächstes wählen wir das erste {{htmlelement("div")}} aus. Wir verwenden zuerst `flex: 1 100px;`, um ihm im Wesentlichen eine Mindesthöhe von `100px` zu geben, dann setzen wir seine Kinder (die {{htmlelement("button")}}-Elemente) ebenfalls so, dass sie als Flex-Elemente angeordnet werden. Hier legen wir sie in eine umhüllende Reihe, zentrieren sie im verfügbaren Raum wie in dem einzelnen Schaltflächen-Beispiel, das wir zuvor gesehen haben.
+Als nächstes wählen wir das erste {{htmlelement("div")}} aus. Wir verwenden zuerst `flex: 1 100px;`, um ihm effektiv eine Mindesthöhe von `100px` zu geben, und dann setzen wir seine Kinder (die {{htmlelement("button")}}-Elemente) so, dass sie ebenfalls wie Flex-Elemente layoutet werden. Hier layouten wir sie in einer umbruchenden Reihe und richten sie in der Mitte des verfügbaren Raums aus, wie wir es mit dem individuellen Schaltfeldbeispiel gesehen haben.
 
 ```css
 article:nth-of-type(3) div:first-child {
@@ -339,7 +860,7 @@ article:nth-of-type(3) div:first-child {
 }
 ```
 
-Schließlich setzen wir einige Größenangaben für die Schaltfläche. Dieses Mal, indem wir ihr einen Flex-Wert von `1 auto` geben. Dies hat einen sehr interessanten Effekt, den Sie sehen werden, wenn Sie die Breite Ihres Browserfensters ändern. Die Schaltflächen nehmen so viel Platz ein, wie sie können. So viele wie komfortabel auf eine Reihe passen; darüber hinaus werden sie zu einer neuen Zeile wechseln.
+Abschließend legen wir einige Größen auf die Schaltfläche fest. Diesmal geben wir ihr einen Flexwert von `1 auto`. Dies hat einen sehr interessanten Effekt, den Sie sehen werden, wenn Sie die Breite Ihres Browserfensters anpassen. Die Schaltflächen nehmen so viel Platz wie möglich ein. So viele wie angenehm auf eine Zeile passen, werden platziert; darüber hinaus fallen sie in eine neue Zeile.
 
 ```css
 button {
@@ -350,22 +871,22 @@ button {
 }
 ```
 
-## Testen Sie Ihr Wissen!
+## Testen Sie Ihr Können!
 
-Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie können einige weitere Tests finden, um zu bestätigen, dass Sie diese Informationen behalten haben, bevor Sie weiterziehen — siehe [Testen Sie Ihr Wissen: Flexbox](/de/docs/Learn_web_development/Core/CSS_layout/Flexbox_skills).
+Sie haben das Ende dieses Artikels erreicht, aber können Sie sich noch an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe [Testen Sie Ihr Können: Flexbox](/de/docs/Learn_web_development/Core/CSS_layout/Flexbox_skills).
 
 ## Zusammenfassung
 
-Damit endet unsere Tour durch die Grundlagen von Flexbox. Wir hoffen, dass Sie Spaß hatten und es Ihnen ein Vergnügen sein wird, damit weiterzuspielen, während Sie Ihr Lernen fortsetzen. Als Nächstes schauen wir uns einen weiteren wichtigen Aspekt von CSS-Layouts an: [CSS-Grids](/de/docs/Learn_web_development/Core/CSS_layout/Grids).
+Damit endet unser Überblick über die Grundlagen von Flexbox. Wir hoffen, dass Sie Spaß hatten und damit weiterspielen werden, während Sie Ihr Lernen weiter vertiefen. Als Nächstes schauen wir uns einen weiteren wichtigen Aspekt von CSS-Layouts an: [CSS Grids](/de/docs/Learn_web_development/Core/CSS_layout/Grids).
 
 ## Siehe auch
 
 - [Grundlegende Konzepte von Flexbox](/de/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
 - [Ausrichten von Elementen in einem Flex-Container](/de/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
-- [Ordnen von Flex-Elementen](/de/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)
-- [Kontrollieren des Verhältnisses von Flex-Elementen entlang der Hauptachse](/de/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
-- [CSS Flexible Box Layout](/de/docs/Web/CSS/CSS_flexible_box_layout)-Modul
+- [Anordnung von Flex-Elementen](/de/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)
+- [Kontrolle der Verhältnisse von Flex-Elementen entlang der Hauptachse](/de/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
+- [CSS Flexible Box Layout](/de/docs/Web/CSS/CSS_flexible_box_layout) Modul
 - [CSS-Tricks Leitfaden zu Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — ein Artikel, der alles über Flexbox auf eine visuell ansprechende Weise erklärt
-- [Flexbox Froggy](https://flexboxfroggy.com/) — ein edukatives Spiel, um die Grundlagen von Flexbox besser zu verstehen und zu lernen
+- [Flexbox Froggy](https://flexboxfroggy.com/) — ein Lehrspiel, um die Grundlagen von Flexbox besser zu verstehen und zu lernen
 
 {{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Positioning", "Learn_web_development/Core/CSS_layout/Grids", "Learn_web_development/Core/CSS_layout")}}
diff --git a/files/de/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md b/files/de/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md
index 9c3c33cab..b4b14dfa7 100644
--- a/files/de/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md
+++ b/files/de/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md
@@ -2,29 +2,29 @@
 title: "JavaScript: Interaktivität hinzufügen"
 slug: Learn_web_development/Getting_started/Your_first_website/Adding_interactivity
 l10n:
-  sourceCommit: a92e10b293358bc796c43d5872a8981fd988a005
+  sourceCommit: 12c76ea107c3caacd28c39e33b9ab2dd879f0855
 ---
 
 {{LearnSidebar}}
 
 {{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Styling_the_content", "Learn_web_development/Getting_started/Your_first_website/Publishing_your_website", "Learn_web_development/Getting_started/Your_first_website")}}
 
-JavaScript ist eine Programmiersprache, die Interaktivität zu Webseiten hinzufügt. Dies geschieht in Spielen, im Verhalten von Reaktionen, wenn Tasten gedrückt werden oder bei der Dateneingabe in Formulare, bei dynamischem Styling, bei Animationen usw. Dieser Artikel hilft Ihnen, mit JavaScript zu beginnen und Ihr Verständnis dafür zu vertiefen, was möglich ist.
+JavaScript ist eine Programmiersprache, die Interaktivität zu Websites hinzufügt. Dies geschieht in Spielen, beim Auslösen von Antworten, wenn Tasten gedrückt werden, oder bei der Dateneingabe in Formulare, mit dynamischem Styling, mit Animationen usw. Dieser Artikel hilft Ihnen, mit JavaScript zu beginnen und Ihr Verständnis darüber zu erweitern, was möglich ist.
 
 <table>
   <tbody>
     <tr>
       <th scope="row">Voraussetzungen:</th>
       <td>
-        Grundlegende Vertrautheit mit Ihrem Computerbetriebssystem, der grundlegenden Software, die Sie zum Erstellen einer Webseite verwenden, und Dateisystemen.
+        Grundlegende Vertrautheit mit dem Betriebssystem Ihres Computers, der grundlegenden Software, die Sie zum Erstellen einer Website verwenden, und Dateisystemen.
       </td>
     </tr>
     <tr>
-      <th scope="row">Lernergebnisse:</th>
+      <th scope="row">Lernziele:</th>
       <td>
         <ul>
           <li>Der Zweck und die Funktion von JavaScript.</li>
-          <li>Grundlagen der JavaScript-Sprache wie Variablen, Operatoren, Bedingungen, Funktionen und Ereignisse.</li>
+          <li>Grundlagen der Javascript-Sprache wie Variablen, Operatoren, Bedingungen, Funktionen und Ereignisse.</li>
         </ul>
       </td>
     </tr>
@@ -33,84 +33,86 @@ JavaScript ist eine Programmiersprache, die Interaktivität zu Webseiten hinzuf
 
 ## Was ist JavaScript?
 
-{{Glossary("JavaScript", "JavaScript")}} ist eine leistungsstarke Programmiersprache, die Interaktivität zu einer Webseite hinzufügen kann. Sie wurde von Brendan Eich erfunden.
+{{Glossary("JavaScript", "JavaScript")}} ist eine leistungsstarke Programmiersprache, die Interaktivität zu einer Website hinzufügen kann.
+Sie wurde von Brendan Eich erfunden.
 
-JavaScript ist vielseitig und benutzerfreundlich für Anfänger. Mit mehr Erfahrung können Sie Spiele, animierte 2D- und 3D-Grafiken, umfassende datenbankgestützte Apps und vieles mehr erstellen!
+JavaScript ist vielseitig und anfängerfreundlich.
+Mit mehr Erfahrung können Sie Spiele, animierte 2D- und 3D-Grafiken, umfassende datenbankgesteuerte Apps und vieles mehr erstellen!
 
-JavaScript selbst ist relativ kompakt, aber sehr flexibel. Entwickler haben eine Vielzahl von Tools auf der Grundlage der Kernsprache JavaScript geschrieben und eine riesige Menge an Funktionalität mit minimalem Aufwand freigeschaltet. Diese beinhalten:
+JavaScript selbst ist relativ kompakt, aber sehr flexibel. Entwickler haben eine Vielzahl von Tools auf Basis der Kern-JavaScript-Sprache geschrieben, die eine enorme Menge an Funktionen mit minimalem Aufwand freischalten. Dazu gehören:
 
-- In Webbrowsern integrierte Browser-Anwendungsprogrammierschnittstellen ({{Glossary("API", "APIs")}}), die Funktionalität wie das dynamische Erstellen von HTML und das Festlegen von CSS-Stilen, das Erfassen und Bearbeiten eines Videostreams von der Webcam eines Benutzers oder das Erzeugen von 3D-Grafiken und Audio-Proben bieten.
-- Drittanbieter-APIs, die es Entwicklern ermöglichen, Funktionalitäten von anderen Inhaltsanbietern wie YouTube oder Facebook in Websites zu integrieren.
-- Drittanbieter-Frameworks und -Bibliotheken, die Sie auf HTML anwenden können, um die Erstellung von Websites und Anwendungen zu beschleunigen.
+- Browser-Anwendungsprogrammierschnittstellen ({{Glossary("API", "APIs")}}), die in Webbrowser integriert sind und Funktionen wie das dynamische Erstellen von HTML und das Einstellen von CSS-Stilen, das Erfassen und Manipulieren eines Video-Streams von der Webcam eines Benutzers oder das Erzeugen von 3D-Grafiken und Audio-Samples bieten.
+- Drittanbieter-APIs, mit denen Entwickler Funktionalitäten von anderen Content-Anbietern wie YouTube oder Facebook in ihre Websites integrieren können.
+- Drittanbieter-Frameworks und Bibliotheken, die Sie auf HTML anwenden können, um die Arbeit beim Erstellen von Websites und Anwendungen zu beschleunigen.
 
-Es liegt außerhalb des Umfangs dieses Artikels – als eine leichte Einführung in JavaScript – die Details zu präsentieren, wie sich die Kernsprache JavaScript von den oben aufgeführten Tools unterscheidet. Weitere Informationen finden Sie in unseren [Core-Modulen](/de/docs/Learn_web_development/Core) sowie in anderen Teilen von MDN.
+Es liegt außerhalb des Umfangs dieses Artikels - als leichte Einführung in JavaScript - die Details darzustellen, wie sich die Kernausführung von JavaScript von den oben genannten Tools unterscheidet. Mehr erfahren Sie in unseren [Kernmodulen](/de/docs/Learn_web_development/Core) sowie in anderen Teilen von MDN.
 
-Der folgende Abschnitt führt einige Aspekte der Kernsprache ein und bietet die Möglichkeit, mit einigen Funktionen der Browser-API zu experimentieren. Viel Spaß!
+Der unten stehende Abschnitt stellt einige Aspekte der Kernsprache vor und bietet die Möglichkeit, mit einigen Funktionen der Browser-APIs zu experimentieren. Viel Spaß!
 
-## Ein "Hallo Welt!" Beispiel
+## Ein "Hello world!" Beispiel
 
-JavaScript ist eine der beliebtesten modernen Webtechnologien! Wenn Ihre JavaScript-Fähigkeiten wachsen, werden Ihre Websites eine neue Dimension von Macht und Kreativität erreichen.
+JavaScript ist eine der beliebtesten modernen Webtechnologien! Wenn Ihre JavaScript-Fähigkeiten wachsen, werden Ihre Websites in eine neue Dimension von Kraft und Kreativität eintreten.
 
-Allerdings ist es herausfordernder, sich mit JavaScript vertraut zu machen, als mit HTML und CSS. Sie sollten klein anfangen und schrittweise voranschreiten. Beginnen wir damit, wie Sie JavaScript zu Ihrer Seite hinzufügen, um ein _Hallo Welt!_ Beispiel zu erstellen. (_Hallo Welt!_ ist [der Standard für einführende Programmierbeispiele](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program).)
+Es ist jedoch herausfordernder, sich mit JavaScript vertraut zu machen, als mit HTML und CSS. Sie sollten klein anfangen und allmählich Fortschritte machen. Um zu beginnen, lassen Sie uns untersuchen, wie Sie JavaScript auf Ihre Seite hinzufügen, um ein _Hello world!_ Beispiel zu erstellen. (_Hello world!_ ist [der Standard für einführende Programmiertests](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program).)
 
 > [!WARNING]
-> Wenn Sie nicht dem Rest unseres Kurses gefolgt sind, [laden Sie dieses Beispielcode herunter](https://codeload.github.com/mdn/beginner-html-site-styled/zip/refs/heads/gh-pages) und verwenden Sie es als Ausgangspunkt.
+> Wenn Sie dem Rest unseres Kurses noch nicht gefolgt sind, [laden Sie diesen Beispielcode herunter](https://codeload.github.com/mdn/beginner-html-site-styled/zip/refs/heads/gh-pages) und verwenden Sie ihn als Ausgangspunkt.
 
-1. Erstellen Sie innerhalb Ihres `first-website`-Ordners einen neuen Ordner namens `scripts`.
-2. Erstellen Sie innerhalb des `scripts`-Ordners ein neues Textdokument namens `main.js` und speichern Sie es.
-3. Gehen Sie zu Ihrer `index.html`-Datei und geben Sie diesen Code in eine neue Zeile ein, kurz vor dem schließenden `</body>`-Tag:
+1. Erstellen Sie in Ihrem Ordner `first-website` einen neuen Ordner namens `scripts`.
+2. Erstellen Sie innerhalb des Ordners `scripts` ein neues Textdokument namens `main.js` und speichern Sie es.
+3. Gehen Sie zu Ihrer Datei `index.html` und geben Sie diesen Code in einer neuen Zeile ein, kurz vor dem schließenden `</body>` Tag:
 
    ```html
    <script src="scripts/main.js"></script>
    ```
 
-   Dies erfüllt die gleiche Funktion wie das {{htmlelement("link")}}-Element für CSS. Es wendet das JavaScript auf die Seite an, sodass es Auswirkungen auf das HTML (zusammen mit dem CSS und allem anderen auf der Seite) haben kann.
+   Dies erfüllt dieselbe Aufgabe, wie das {{htmlelement("link")}} Element für CSS. Es wendet das JavaScript auf die Seite an, sodass es einen Effekt auf das HTML haben kann (zusammen mit dem CSS und allem anderen auf der Seite).
 
-4. Fügen Sie diesen Code zu Ihrer `scripts/main.js`-Datei hinzu:
+4. Fügen Sie diesen Code Ihrer Datei `scripts/main.js` hinzu:
 
    ```js
    const myHeading = document.querySelector("h1");
    myHeading.textContent = "Hello world!";
    ```
 
-5. Stellen Sie sicher, dass die HTML- und JavaScript-Dateien gespeichert sind, und laden Sie dann `index.html` in Ihrem Browser. Sie sollten etwas wie das folgende sehen:
+5. Stellen Sie sicher, dass die HTML- und JavaScript-Dateien gespeichert sind, laden Sie dann `index.html` in Ihrem Browser. Sie sollten etwas sehen, das so aussieht:
 
 ![Überschrift "hello world" über einem Firefox-Logo](hello-world.png)
 
 > [!NOTE]
-> Der Grund, warum die obigen Anweisungen das {{htmlelement("script")}}-Element nahe dem Ende der HTML-Datei platzieren, besteht darin, dass **der Browser den Code in der Reihenfolge liest, in der er in der Datei erscheint**.
+> Der Grund, warum die obigen Anweisungen das {{htmlelement("script")}} Element in der Nähe des unteren Endes der HTML-Datei platzieren, ist, dass **der Browser den Code in der Reihenfolge liest, in der er in der Datei erscheint**.
 >
-> Wenn das JavaScript zuerst geladen wird und es das HTML beeinflussen soll, das noch nicht geladen ist, könnten Probleme auftreten. JavaScript nahe dem Ende einer HTML-Seite zu platzieren, ist eine Möglichkeit, diese Abhängigkeit zu berücksichtigen.
+> Wenn das JavaScript zuerst geladen wird und es HTML beeinflussen soll, das noch nicht geladen ist, könnte es Probleme geben. JavaScript nahe dem Ende einer HTML-Seite zu platzieren, ist eine Möglichkeit, dieser Abhängigkeit Rechnung zu tragen.
 
 ### Was ist passiert?
 
-Wir haben JavaScript verwendet, um den Text der Überschrift in _Hello world!_ zu ändern. Dies haben wir getan, indem wir eine Funktion namens [`querySelector()`](/de/docs/Web/API/Document/querySelector) verwendet haben, um eine Referenz auf Ihre Überschrift zu erhalten und sie dann in einer Variablen namens `myHeading` zu speichern. Dies ist ähnlich wie das, was wir mit CSS-Selektoren gemacht haben. Wenn Sie etwas mit einem Element tun möchten, müssen Sie es zuerst auswählen.
+Wir haben JavaScript verwendet, um den Text der Überschrift in _Hello world!_ zu ändern. Dies haben wir erreicht, indem wir eine Funktion namens [`querySelector()`](/de/docs/Web/API/Document/querySelector) verwendet haben, um eine Referenz zu Ihrer Überschrift zu erhalten, und sie in einer Variablen namens `myHeading` zu speichern. Dies ist ähnlich wie das, was wir mit CSS-Selektoren getan haben. Wenn Sie etwas mit einem Element machen wollen, müssen Sie es zuerst auswählen.
 
-Anschließend setzte der Code den Wert der [`textContent`](/de/docs/Web/API/Node/textContent)-Eigenschaft der Variablen `myHeading` (die den Inhalt der Überschrift darstellt) auf _Hello world!_.
+Danach hat der Code den Wert der [`textContent`](/de/docs/Web/API/Node/textContent)-Eigenschaft der `myHeading`-Variablen (die den Inhalt der Überschrift darstellt) auf _Hello world!_ gesetzt.
 
 > [!NOTE]
-> Beide der von Ihnen in dieser Übung verwendeten Features sind Teile der [Document Object Model (DOM) API](/de/docs/Web/API/Document_Object_Model), die Dokumente manipulieren kann.
+> Beide Funktionen, die Sie in dieser Übung verwendet haben, sind Teile der [Document Object Model (DOM) API](/de/docs/Web/API/Document_Object_Model), die die Fähigkeit hat, Dokumente zu manipulieren.
 
-## Crashkurs zu Sprachgrundlagen
+## Grundlagen der Sprache - Schnellkurs
 
-Um Ihnen ein besseres Verständnis dafür zu geben, wie JavaScript funktioniert, erläutern wir einige der Kernfunktionen der Sprache. Es ist erwähnenswert, dass diese Funktionen allen Programmiersprachen gemeinsam sind. Wenn Sie diese Grundlagen beherrschen, haben Sie einen Vorsprung beim Programmieren in anderen Sprachen!
+Um Ihnen ein besseres Verständnis dafür zu geben, wie JavaScript funktioniert, erklären wir einige der Kernfunktionen der Sprache. Es ist erwähnenswert, dass diese Funktionen in allen Programmiersprachen üblich sind. Wenn Sie diese Grundlagen beherrschen, haben Sie einen Vorsprung beim Codieren in anderen Sprachen!
 
 > [!WARNING]
-> Geben Sie in diesem Artikel die Beispiel-Codezeilen in Ihre JavaScript-Konsole ein, um zu sehen, was passiert. Weitere Details zu JavaScript-Konsolen finden Sie unter [Entwicklertools des Browsers entdecken](/de/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools).
+> In diesem Artikel sollten Sie versuchen, die Beispielcodezeilen in Ihre JavaScript-Konsole einzugeben, um zu sehen, was passiert. Weitere Details zu JavaScript-Konsolen finden Sie unter [Entdecken Sie Browser-Entwicklungstools](/de/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools).
 
 ### Variablen
 
-{{Glossary("Variable", "Variablen")}} sind Container, die Werte speichern. Sie beginnen mit der Deklaration einer Variablen mit dem Schlüsselwort [`let`](/de/docs/Web/JavaScript/Reference/Statements/let), gefolgt von dem Namen, den Sie der Variablen geben:
+{{Glossary("Variable", "Variablen")}} sind Container, die Werte speichern. Sie beginnen, indem Sie eine Variable mit dem Schlüsselwort [`let`](/de/docs/Web/JavaScript/Reference/Statements/let) deklarieren, gefolgt vom Namen, den Sie der Variablen geben:
 
 ```js
 let myVariable;
 ```
 
-Ein Semikolon am Ende einer Zeile zeigt an, wo eine Anweisung endet. Es ist nur erforderlich, wenn Sie Anweisungen auf einer einzigen Zeile trennen müssen. Einige Leute halten es jedoch für gute Praxis, Semikolons am Ende jeder Anweisung zu verwenden. Es gibt andere Regeln, wann Sie Semikolons verwenden sollten und wann nicht. Weitere Details finden Sie in [Ihr Leitfaden zu Semikolons in JavaScript](https://www.codecademy.com/resources/blog/your-guide-to-semicolons-in-javascript/).
+Ein Semikolon am Ende einer Zeile markiert das Ende einer Anweisung. Es ist nur erforderlich, wenn Sie Anweisungen in einer einzigen Zeile trennen müssen. Einige Menschen glauben jedoch, dass es gute Praxis ist, Semikolons am Ende jeder Anweisung zu haben. Es gibt andere Regeln, wann man Semikolons verwenden sollte und wann nicht. Weitere Details finden Sie unter [Ihr Leitfaden zu Semikolons in JavaScript](https://www.codecademy.com/resources/blog/your-guide-to-semicolons-in-javascript/).
 
-Sie können eine Variable fast beliebig benennen, es gibt jedoch einige Einschränkungen. (Siehe [diesen Abschnitt über Benennungsregeln](/de/docs/Web/JavaScript/Guide/Grammar_and_types#variables).) Wenn Sie unsicher sind, können Sie [Ihre Variable](https://mothereff.in/js-variables) überprüfen, um zu sehen, ob sie gültig ist.
+Sie können einer Variablen fast jeden Namen geben, aber es gibt einige Einschränkungen. (Sehen Sie sich diesen Abschnitt über Namensregeln an](/de/docs/Web/JavaScript/Guide/Grammar_and_types#variables).) Wenn Sie sich unsicher sind, können Sie Ihren [Variablennamen überprüfen](https://mothereff.in/js-variables), um zu sehen, ob er gültig ist.
 
-JavaScript ist groß- und kleinschreibungssensitiv. Das bedeutet, dass `myVariable` nicht dasselbe ist wie `myvariable`. Wenn Sie in Ihrem Code Probleme haben, überprüfen Sie die Groß- und Kleinschreibung!
+JavaScript ist case-sensitiv. Das bedeutet, dass `myVariable` nicht dasselbe ist wie `myvariable`. Wenn Sie Probleme in Ihrem Code haben, überprüfen Sie die Groß-/Kleinschreibung!
 
 Nach der Deklaration einer Variablen können Sie ihr einen Wert zuweisen:
 
@@ -118,7 +120,7 @@ Nach der Deklaration einer Variablen können Sie ihr einen Wert zuweisen:
 myVariable = "Bob";
 ```
 
-Außerdem können Sie beide Operationen auf derselben Zeile durchführen:
+Sie können diese beiden Operationen auch in derselben Zeile durchführen:
 
 ```js
 let myVariable = "Bob";
@@ -130,14 +132,14 @@ Sie rufen den Wert ab, indem Sie den Variablennamen aufrufen:
 myVariable;
 ```
 
-Nachdem Sie einer Variablen einen Wert zugewiesen haben, können Sie ihn später im Code ändern:
+Nachdem Sie einer Variablen einen Wert zugewiesen haben, können Sie diesen später im Code ändern:
 
 ```js
 let myVariable = "Bob";
 myVariable = "Steve";
 ```
 
-Beachten Sie, dass Variablen Werte enthalten können, die unterschiedliche [Datentypen](/de/docs/Web/JavaScript/Data_structures) haben:
+Beachten Sie, dass Variablen Werte verschiedener [Datentypen](/de/docs/Web/JavaScript/Data_structures) halten können:
 
 <table class="standard-table">
   <thead>
@@ -151,57 +153,50 @@ Beachten Sie, dass Variablen Werte enthalten können, die unterschiedliche [Date
     <tr>
       <th scope="row">{{Glossary("String", "String")}}</th>
       <td>
-        Dies ist eine Textsequenz, bekannt als String. Um anzuzeigen, dass der
-        Wert ein String ist, schließen Sie ihn in einfache oder doppelte
-        Anführungszeichen ein.
+        Dies ist eine Textfolge, bekannt als Zeichenkette. Um anzuzeigen, dass der Wert eine Zeichenkette ist, umgeben Sie ihn mit einfachen oder doppelten Anführungszeichen.
       </td>
       <td><code>let myVariable = 'Bob';</code> oder <br/><code>let myVariable = "Bob";</code></td>
     </tr>
     <tr>
       <th scope="row">{{Glossary("Number", "Number")}}</th>
-      <td>Dies ist eine Zahl. Zahlen haben keine Anführungszeichen um sich herum.</td>
+      <td>Dies ist eine Zahl. Zahlen haben keine Anführungszeichen.</td>
       <td><code>let myVariable = 10;</code></td>
     </tr>
     <tr>
       <th scope="row">{{Glossary("Boolean", "Boolean")}}</th>
       <td>
-        Dies ist ein True/False-Wert. Die Wörter <code>true</code> und
-        <code>false</code> sind spezielle Schlüsselwörter, die keine
-        Anführungszeichen benötigen.
+        Dies ist ein Wahr-/Falsch-Wert. Die Wörter <code>true</code> und
+        <code>false</code> sind spezielle Schlüsselwörter, die keine Anführungszeichen benötigen.
       </td>
       <td><code>let myVariable = true;</code></td>
     </tr>
     <tr>
       <th scope="row">{{Glossary("Array", "Array")}}</th>
       <td>
-        Dies ist eine Struktur, die es ermöglicht, mehrere Werte in einem
-        einzelnen Verweis zu speichern.
+        Dies ist eine Struktur, die es Ihnen ermöglicht, mehrere Werte in einer einzigen Referenz zu speichern.
       </td>
       <td>
-        <code>let myVariable = [1,'Bob','Steve',10];</code><br />Greifen Sie auf
-        jedes Mitglied des Arrays wie folgt zu:<br /><code>myVariable[0]</code>,
-        <code>myVariable[1]</code> usw.
+        <code>let myVariable = [1,'Bob','Steve',10];</code><br />Beziehen Sie sich auf jedes Element des Arrays wie folgt:<br /><code>myVariable[0]</code>,
+        <code>myVariable[1]</code>, usw.
       </td>
     </tr>
     <tr>
       <th scope="row">{{Glossary("Object", "Object")}}</th>
       <td>
-        Dies kann alles sein. Alles in JavaScript ist ein Objekt und kann in
-        einer Variablen gespeichert werden. Behalten Sie dies im Hinterkopf, während Sie lernen.
+        Dies kann alles sein. Alles in JavaScript ist ein Objekt und kann in einer Variablen gespeichert werden. Behalten Sie dies im Hinterkopf, während Sie lernen.
       </td>
       <td>
-        <code>let myVariable = document.querySelector('h1');</code><br />Alle
-        obigen Beispiele auch.
+        <code>let myVariable = document.querySelector('h1');</code><br />Alle obigen Beispiele auch.
       </td>
     </tr>
   </tbody>
 </table>
 
-Warum brauchen wir also Variablen? Variablen sind notwendig, um irgendetwas Interessantes in der Programmierung zu tun. Wenn Werte sich nicht ändern könnten, könnten Sie nichts Dynamisches tun, wie z.B. eine Begrüßungsnachricht personalisieren oder ein Bild in einer Bildergalerie ändern.
+Warum brauchen wir Variablen? Variablen sind notwendig, um in der Programmierung etwas Interessantes zu tun. Wenn Werte sich nicht ändern könnten, dann könnten Sie nichts Dynamisches machen, wie z. B. eine Begrüßungsnachricht personalisieren oder ein Bild in einer Bildergalerie ändern.
 
 ### Kommentare
 
-Kommentare sind Textausschnitte, die zusammen mit Code hinzugefügt werden können. Der Browser ignoriert als Kommentar markierten Text. Sie können Kommentare in JavaScript schreiben, genau wie in CSS:
+Kommentare sind Textschnipsel, die zusammen mit dem Code hinzugefügt werden können. Der Browser ignoriert Text, der als Kommentar markiert ist. Sie können Kommentare in JavaScript schreiben, genau wie in CSS:
 
 ```js
 /*
@@ -209,7 +204,7 @@ Everything in between is a comment.
 */
 ```
 
-Wenn Ihr Kommentar keine Zeilenumbrüche enthält, kann er hinter zwei Schrägstrichen so platziert werden:
+Wenn Ihr Kommentar keine Zeilenumbrüche enthält, können Sie ihn wie folgt hinter zwei Schrägstrichen platzieren:
 
 ```js
 // This is a comment
@@ -217,7 +212,7 @@ Wenn Ihr Kommentar keine Zeilenumbrüche enthält, kann er hinter zwei Schrägst
 
 ### Operatoren
 
-Ein `{{Glossary("operator", "Operator")}}` ist ein mathematisches Symbol, das als Ergebnis auf zwei Werte (oder Variablen) basiert. In der folgenden Tabelle sehen Sie einige der einfachsten Operatoren zusammen mit einigen Beispielen, die Sie in der JavaScript-Konsole ausprobieren können.
+Ein `{{Glossary("operator", "Operator")}}` ist ein mathematisches Symbol, das auf Basis zweier Werte (oder Variablen) ein Ergebnis liefert. In der folgenden Tabelle sehen Sie einige der einfachsten Operatoren sowie einige Beispiele zum Ausprobieren in der JavaScript-Konsole.
 
 <table class="standard-table">
   <thead>
@@ -231,7 +226,7 @@ Ein `{{Glossary("operator", "Operator")}}` ist ein mathematisches Symbol, das al
   <tbody>
     <tr>
       <th scope="row">Addition</th>
-      <td>Zwei Zahlen zusammenzählen oder zwei Strings kombinieren.</td>
+      <td>Addiert zwei Zahlen oder kombiniert zwei Zeichenfolgen.</td>
       <td><code>+</code></td>
       <td>
         <code>6 + 9;<br />'Hello ' + 'world!';</code>
@@ -239,26 +234,25 @@ Ein `{{Glossary("operator", "Operator")}}` ist ein mathematisches Symbol, das al
     </tr>
     <tr>
       <th scope="row">Subtraktion, Multiplikation, Division</th>
-      <td>Diese tun das, was Sie in der Grundmathematik erwarten würden.</td>
+      <td>Diese machen das, was Sie von ihnen in der Grundmathematik erwarten.</td>
       <td><code>-</code>, <code>*</code>, <code>/</code></td>
       <td>
         <code
->9 - 3;<br />8 * 2; // multiplizieren in JS ist ein Sternchen<br />9 / 3;</code
+>9 - 3;<br />8 * 2; // Multiplikation in JS ist ein Sternchen<br />9 / 3;</code
         >
       </td>
     </tr>
     <tr>
       <th scope="row">Zuweisung</th>
-      <td>Wie bereits gesehen: Dies weist einer Variablen einen Wert zu.</td>
+      <td>Wie Sie bereits gesehen haben: dient dies zur Zuweisung eines Wertes zu einer Variablen.</td>
       <td><code>=</code></td>
       <td><code>let myVariable = 'Bob';</code></td>
     </tr>
     <tr>
       <th scope="row">Strikte Gleichheit</th>
       <td>
-        Dies führt einen Test durch, um zu sehen, ob zwei Werte gleich und vom
-        gleichen Datentyp sind. Es gibt ein <code>true</code>/<code>false</code>
-        (Boolean) Ergebnis zurück.
+        Es wird ein Test durchgeführt, um festzustellen, ob zwei Werte gleich und vom selben Datentyp sind. Es ergibt ein
+        <code>true</code>/<code>false</code> (Boolean) Ergebnis.
       </td>
       <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Strict_equality"><code>===</code></a></td>
       <td>
@@ -268,25 +262,19 @@ Ein `{{Glossary("operator", "Operator")}}` ist ein mathematisches Symbol, das al
     <tr>
       <th scope="row">Nicht, Ungleich</th>
       <td>
-        Dies gibt den logisch gegenteiligen Wert von dem zurück, was es
-        vorangeht. Es verwandelt ein <code>true</code> in ein <code>false</code>
-        u.s.w. Wenn es zusammen mit dem Gleichheitsoperator verwendet wird,
-        testet der Negationsoperator, ob zwei Werte <em>nicht</em> gleich sind.
+        Diese liefert den logisch gegenteiligen Wert von dem, was sie vorangeht. Es verwandelt
+        ein <code>true</code> in ein <code>false</code>, usw. Wenn es zusammen mit dem Gleichheitsoperator verwendet wird, testet der Negationsoperator, ob zwei Werte <em>nicht</em> gleich sind.
       </td>
       <td><code>!</code>, <code>!==</code></td>
       <td>
         <p>
-          Bei "Nicht" ist der grundlegende Ausdruck <code>true</code>, aber der
-          Vergleich gibt <code>false</code> zurück, weil wir es negieren:
+          Für "Nicht" ist der grundlegende Ausdruck <code>true</code>, aber der Vergleich gibt <code>false</code> zurück, da wir ihn negieren:
         </p>
         <p>
           <code>let myVariable = 3;<br />!(myVariable === 3);</code>
         </p>
         <p>
-          "Ungleich" gibt im Grunde dasselbe Ergebnis mit unterschiedlicher
-          Syntax. Hier testen wir "ist <code>myVariable</code> NICHT gleich 3".
-          Dies gibt <code>false</code> zurück, weil <code>myVariable</code>
-          gleich 3 ist:
+          "Ungleich" ergibt im Wesentlichen dasselbe Ergebnis mit anderer Syntax. Hier testen wir "ist <code>myVariable</code> NICHT gleich 3". Dies ergibt <code>false</code>, da <code>myVariable</code> GLEICH 3 ist:
         </p>
         <p>
           <code>let myVariable = 3;<br />myVariable !== 3;</code>
@@ -296,14 +284,14 @@ Ein `{{Glossary("operator", "Operator")}}` ist ein mathematisches Symbol, das al
   </tbody>
 </table>
 
-Es gibt noch viele weitere Operatoren zu erkunden, aber das ist fürs Erste genug. Siehe [Ausdrücke und Operatoren](/de/docs/Web/JavaScript/Reference/Operators) für eine vollständige Liste.
+Es gibt viele weitere Operatoren zu erkunden, aber das reicht für jetzt. Siehe [Ausdrücke und Operatoren](/de/docs/Web/JavaScript/Reference/Operators) für eine vollständige Liste.
 
 > [!NOTE]
-> Das Mischen von Datentypen kann zu einigen seltsamen Ergebnissen führen, wenn Berechnungen durchgeführt werden. Achten Sie darauf, dass Sie auf Ihre Variablen richtig verweisen und die Ergebnisse erhalten, die Sie erwarten. Beispielsweise geben Sie `'35' + '25'` in Ihrer Konsole ein. Warum erhalten Sie nicht das gewünschte Ergebnis? Weil die Anführungszeichen die Zahlen in Zeichenfolgen verwandeln, sodass Sie am Ende Zeichenfolgen verketten, anstatt Zahlen zu addieren. Wenn Sie `35 + 25` eingeben, erhalten Sie die Summe der beiden Zahlen.
+> Das Mischen von Datentypen kann zu merkwürdigen Ergebnissen bei Berechnungen führen. Achten Sie darauf, dass Sie Ihre Variablen richtig referenzieren und die erwarteten Ergebnisse erzielen. Geben Sie zum Beispiel `'35' + '25'` in Ihre Konsole ein. Warum erhalten Sie nicht das erwartete Ergebnis? Weil die Anführungszeichen die Zahlen in Zeichenfolgen verwandeln, sodass Sie am Ende Zeichenfolgen zusammenfügen statt Zahlen zu addieren. Wenn Sie `35 + 25` eingeben, erhalten Sie die Summe der beiden Zahlen.
 
 ### Bedingungen
 
-Bedingungen sind Code-Strukturen, die verwendet werden, um zu testen, ob ein Ausdruck wahr ist oder nicht. Eine sehr häufige Form der Bedingungen ist die `if...else`-Anweisung. Zum Beispiel:
+Bedingungen sind Code-Strukturen, die verwendet werden, um zu testen, ob ein Ausdruck wahr zurückgibt oder nicht. Eine sehr häufige Form von Bedingungen ist die `if...else`-Anweisung. Zum Beispiel:
 
 ```js
 let iceCream = "chocolate";
@@ -314,11 +302,11 @@ if (iceCream === "chocolate") {
 }
 ```
 
-Der Ausdruck innerhalb der `if ()` ist der Test. Dieser verwendet den strikten Gleichheitsoperator (wie oben beschrieben), um die Variable `iceCream` mit dem String `chocolate` zu vergleichen, um zu sehen, ob die beiden gleich sind. Wenn dieser Vergleich `true` zurückgibt, wird der erste Codeblock ausgeführt. Wenn der Vergleich nicht wahr ist, wird stattdessen der zweite Codeblock – nach dem Schlüsselwort `else` – ausgeführt.
+Der Ausdruck in `if ()` ist der Test. Dieser verwendet den strikten Gleichheitsoperator (wie oben beschrieben), um die Variable `iceCream` mit der Zeichenkette `chocolate` zu vergleichen, um zu sehen, ob die beiden gleich sind. Wenn dieser Vergleich `true` ergibt, wird der erste Codeblock ausgeführt. Wenn der Vergleich nicht wahr ist, wird der zweite Codeblock – nach dem `else`-Schlüsselwort – stattdessen ausgeführt.
 
 ### Funktionen
 
-{{Glossary("Function", "Funktionen")}} sind eine Möglichkeit, Funktionalität zu verpacken, die Sie wiederverwenden möchten. Es ist möglich, einen Codekörper als Funktion zu definieren, der ausgeführt wird, wenn Sie den Funktionsnamen in Ihrem Code aufrufen. Dies ist eine gute Alternative dazu, denselben Code immer wieder zu schreiben. Sie haben bereits einige Verwendungen von Funktionen gesehen. Zum Beispiel:
+{{Glossary("Function", "Funktionen")}} sind eine Möglichkeit, Funktionalitäten zu verpacken, die Sie wiederverwenden möchten. Es ist möglich, einen Codekörper als Funktion zu definieren, die ausgeführt wird, wenn Sie den Funktionsnamen in Ihrem Code aufrufen. Dies ist eine gute Alternative dazu, denselben Code wiederholt zu schreiben. Sie haben bereits einige Verwendungen von Funktionen gesehen. Zum Beispiel:
 
 ```js
 let myVariable = document.querySelector("h1");
@@ -328,11 +316,11 @@ let myVariable = document.querySelector("h1");
 alert("hello!");
 ```
 
-Die `document.querySelector()` und `alert()` Funktionen sind in den Browser integriert.
+Die `document.querySelector()`- und `alert()`-Funktionen sind im Browser integriert.
 
-Wenn Sie etwas sehen, das wie ein Variablenname aussieht, aber ihm Klammern – `()` – folgen, handelt es sich wahrscheinlich um eine Funktion. Funktionen nehmen oft {{Glossary("Argument", "Argumente")}}: Daten, die sie benötigen, um ihre Aufgabe zu erfüllen. Argumente gehen in die Klammern und werden durch Kommata getrennt, wenn es mehr als ein Argument gibt.
+Wenn Sie etwas sehen, das wie ein Variablenname aussieht, aber von Klammern gefolgt wird — `()` — ist es wahrscheinlich eine Funktion. Funktionen nehmen oft {{Glossary("Argument", "Argumente")}} entgegen: Bits von Daten, die sie für ihre Aufgabe benötigen. Argumente gehen in die Klammern, durch Kommas getrennt, wenn es mehr als ein Argument gibt.
 
-Zum Beispiel macht die `alert()` Funktion eine Popup-Box innerhalb des Browserfensters erscheinen, aber wir müssen ihr einen String als Argument geben, um der Funktion mitzuteilen, welche Nachricht angezeigt werden soll.
+Zum Beispiel lässt die `alert()`-Funktion ein Popup-Fenster innerhalb des Browserfensters erscheinen, aber wir müssen ihr eine Zeichenfolge als Argument geben, um der Funktion zu sagen, welche Nachricht angezeigt werden soll.
 
 Sie können auch Ihre eigenen Funktionen definieren. Im nächsten Beispiel erstellen wir eine einfache Funktion, die zwei Zahlen als Argumente nimmt und sie multipliziert:
 
@@ -343,7 +331,7 @@ function multiply(num1, num2) {
 }
 ```
 
-Versuchen Sie, dies in der Konsole auszuführen; testen Sie dann mit mehreren Argumenten. Zum Beispiel:
+Versuchen Sie, dies in der Konsole auszuführen; testen Sie dann mit verschiedenen Argumenten. Zum Beispiel:
 
 ```js
 multiply(4, 7);
@@ -352,11 +340,11 @@ multiply(0.5, 3);
 ```
 
 > [!NOTE]
-> Die [`return`](/de/docs/Web/JavaScript/Reference/Statements/return)-Anweisung teilt dem Browser mit, die `result`-Variable aus der Funktion zurückzugeben, damit sie verwendbar ist. Dies ist notwendig, da Variablen, die innerhalb von Funktionen definiert sind, nur innerhalb dieser Funktionen verfügbar sind. Dies wird Variablen-{{Glossary("Scope", "Scoping")}} genannt. (Lesen Sie mehr über [Variablen-Scoping](/de/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope).)
+> Die [`return`](/de/docs/Web/JavaScript/Reference/Statements/return)-Anweisung sagt dem Browser, die `result`-Variable aus der Funktion zurückzugeben, sodass sie verfügbar ist. Dies ist notwendig, weil Variablen, die innerhalb von Funktionen definiert sind, nur innerhalb dieser Funktionen verfügbar sind. Dies wird {{Glossary("Scope", "Scoping von Variablen")}} genannt. (Lesen Sie mehr über [Scoping von Variablen](/de/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope).)
 
 ### Ereignisse
 
-Echte Interaktivität auf einer Website erfordert Ereignis-Handler. Dies sind Code-Strukturen, die auf Aktivität im Browser warten und Code als Reaktion darauf ausführen. Das offensichtlichste Beispiel ist die Behandlung des [klick-Ereignisses](/de/docs/Web/API/Element/click_event), das vom Browser ausgelöst wird, wenn Sie auf etwas mit Ihrer Maus klicken. Um dies zu demonstrieren, geben Sie Folgendes in Ihre Konsole ein und klicken dann auf die aktuelle Webseite:
+Echte Interaktivität auf einer Website erfordert Ereignis-Handler. Dies sind Code-Strukturen, die auf Aktivitäten im Browser hören und Code als Reaktion darauf ausführen. Das offensichtlichste Beispiel ist das Behandeln des [Click-Events](/de/docs/Web/API/Element/click_event), das vom Browser ausgelöst wird, wenn Sie auf etwas mit Ihrer Maus klicken. Um dies zu demonstrieren, geben Sie das Folgende in Ihre Konsole ein und klicken dann auf die aktuelle Webseite:
 
 ```js
 document.querySelector("html").addEventListener("click", function () {
@@ -364,9 +352,11 @@ document.querySelector("html").addEventListener("click", function () {
 });
 ```
 
-Es gibt eine Anzahl von Möglichkeiten, um einen Ereignis-Handler an ein Element zu knüpfen. Hier wählen wir das {{htmlelement("html")}}-Element aus. Wir rufen dann seine [`addEventListener()`](/de/docs/Web/API/EventTarget/addEventListener)-Funktion auf, übergeben den Namen des zu überwachenden Ereignisses (`'click'`) und eine Funktion, die ausgeführt wird, wenn das Ereignis auftritt.
+Es gibt verschiedene Möglichkeiten, einen Ereignis-Handler an ein Element anzuhängen.
+Hier wählen wir das {{htmlelement("html")}}-Element aus. Wir rufen dann ihre [`addEventListener()`](/de/docs/Web/API/EventTarget/addEventListener)-Funktion auf und übergeben den Namen des zu hörenden Ereignisses (`'click'`) und eine Funktion, die ausgeführt wird, wenn das Ereignis eintritt.
 
-Die Funktion, die wir gerade an `addEventListener()` übergeben haben, wird als _anonyme Funktion_ bezeichnet, da sie keinen Namen hat. Es gibt eine alternative Möglichkeit, anonyme Funktionen zu schreiben, die wir _Pfeilfunktion_ nennen. Eine Pfeilfunktion verwendet `() =>` anstelle von `function ()`:
+Die Funktion, die wir gerade an `addEventListener()` übergeben haben, ist eine _anonyme Funktion_, da sie keinen Namen hat. Es gibt eine alternative Schreibweise für anonyme Funktionen, die wir einen _Pfeilfunktion_ nennen.
+Eine Pfeilfunktion verwendet `() =>` anstelle von `function ()`:
 
 ```js
 document.querySelector("html").addEventListener("click", () => {
@@ -374,19 +364,19 @@ document.querySelector("html").addEventListener("click", () => {
 });
 ```
 
-## Unser Beispielwebsite aufladen
+## Unser Beispiel-Website aufladen
 
-Mit unserem Überblick über die Grundlagen von JavaScript, lassen Sie uns einige neue Funktionen zu unserer Beispiel-Website hinzufügen.
+Mit unserem Überblick über die JavaScript-Grundlagen abgeschlossen, lassen Sie uns einige neue Funktionen zu unserem Beispiel-Website hinzufügen.
 
-Bevor Sie weiter fortfahren, löschen Sie den aktuellen Inhalt Ihrer `main.js`-Datei — den Teil, den Sie zuvor im "Hallo Welt!"-Beispiel hinzugefügt haben — und speichern Sie die leere Datei. Wenn Sie dies nicht tun, wird der bestehende Code mit dem neuen Code, den Sie hinzufügen möchten, in Konflikt stehen.
+Bevor Sie weitermachen, löschen Sie den aktuellen Inhalt Ihrer `main.js`-Datei — den Teil, den Sie vorher während des „Hello world!“-Beispiels hinzugefügt haben — und speichern Sie die leere Datei. Wenn Sie dies nicht tun, wird der vorhandene Code mit dem neuen Code, den Sie hinzufügen, in Konflikt geraten.
 
 ### Einen Bildwechsler hinzufügen
 
-In diesem Abschnitt erfahren Sie, wie Sie JavaScript und DOM-API-Funktionen verwenden, um das Display zwischen zwei Bildern zu wechseln. Diese Änderung wird beim Klicken auf das angezeigte Bild erfolgen.
+In diesem Abschnitt lernen Sie, wie Sie mit JavaScript und DOM-API-Funktionen den Wechsel zwischen zwei Bildern ermöglichen. Dieser Wechsel erfolgt, wenn ein Nutzer auf das angezeigte Bild klickt.
 
-1. Wählen Sie ein anderes Bild aus, das auf Ihrer Beispiel-Website gezeigt werden soll. Idealerweise sollte das Bild die gleiche Größe wie das zuvor hinzugefügte Bild haben oder so nah wie möglich sein.
+1. Wählen Sie ein weiteres Bild aus, das Sie auf Ihrer Beispiel-Website zeigen möchten. Idealerweise sollte das Bild dieselbe Größe wie das Bild haben, das Sie zuvor hinzugefügt haben, oder zumindest ähnlich groß sein.
 2. Speichern Sie dieses Bild in Ihrem `images`-Ordner.
-3. Fügen Sie den folgenden JavaScript-Code zu Ihrer `main.js`-Datei hinzu, und achten Sie darauf, `firefox2.png` und beide Instanzen von `firefox-icon.png` mit Ihren zweiten und ersten Bildnamen zu ersetzen.
+3. Fügen Sie den folgenden JavaScript-Code in Ihrer `main.js`-Datei hinzu und ersetzen Sie dabei `firefox2.png` und beide Instanzen von `firefox-icon.png` durch Ihren zweiten und ersten Bildnamen.
 
    ```js
    const myImage = document.querySelector("img");
@@ -401,34 +391,34 @@ In diesem Abschnitt erfahren Sie, wie Sie JavaScript und DOM-API-Funktionen verw
    });
    ```
 
-4. Speichern Sie alle Dateien und laden Sie `index.html` im Browser. Jetzt sollte sich das Bild ändern, wenn Sie darauf klicken.
+4. Speichern Sie alle Dateien und laden Sie `index.html` im Browser. Jetzt, wenn Sie auf das Bild klicken, sollte es sich in das andere verändern.
 
-Im obigen Code haben Sie eine Referenz auf Ihr {{htmlelement("img")}}-Element in `myImage` gespeichert. Anschließend haben Sie ihm einen `click`-Ereignis-Handler ohne Namen zugewiesen (eine "anonyme" Funktion). Jedes Mal, wenn dieses Element angeklickt wird, führt die Funktion Folgendes aus:
+In dem obigen Code haben Sie eine Referenz auf Ihr {{htmlelement("img")}}-Element in `myImage` gespeichert. Als Nächstes haben Sie ihm eine `click`-Ereignis-Handler-Funktion zugewiesen, ohne einen Namen (eine "anonyme" Funktion). Jedes Mal, wenn dieses Element angeklickt wird, führt die Funktion Folgendes aus:
 
 1. Ruft den Wert des `src`-Attributs des Bildes ab.
-2. Verwendet eine Bedingung, um zu prüfen, ob der `src`-Wert dem Pfad des ursprünglichen Bildes entspricht:
+2. Verwendet eine Bedingung, um zu überprüfen, ob der `src`-Wert gleich dem Pfad des Originalbildes ist:
 
-   1. Wenn ja, ändert der Code den `src`-Wert in den Pfad des zweiten Bildes, sodass das andere Bild im {{htmlelement("img")}}-Element geladen wird.
-   2. Wenn nein (was bedeutet, dass es sich bereits geändert haben muss), wechselt der `src`-Wert zurück zum ursprünglichen Bildpfad.
+   1. Wenn es ist, ändert der Code den `src`-Wert auf den Pfad des zweiten Bildes, wodurch das andere Bild im {{htmlelement("img")}}-Element geladen wird.
+   2. Wenn es nicht der Fall ist (d. h., es muss bereits geändert worden sein), wechselt der `src`-Wert zurück zum ursprünglichen Bildpfad.
 
 ### Eine personalisierte Begrüßungsnachricht hinzufügen
 
-Nächste, lasst uns die Seitenüberschrift in eine personalisierte Begrüßungsnachricht ändern, wenn der Benutzer die Seite zum ersten Mal besucht. Diese Begrüßungsnachricht wird fortbestehen. Sollte der Benutzer die Seite verlassen und später zurückkehren, speichern wir die Nachricht mit der [Webspeicher-API](/de/docs/Web/API/Web_Storage_API). Wir werden auch eine Option einfügen, um den Benutzernamen zu ändern und damit auch die Begrüßungsnachricht.
+Als Nächstes ändern wir die Seitenüberschrift in eine personalisierte Begrüßungsnachricht, wenn der Benutzer die Seite zum ersten Mal besucht. Diese Begrüßungsnachricht bleibt bestehen. Falls der Benutzer die Site verlässt und später zurückkehrt, speichern wir die Nachricht mithilfe der [Web Storage API](/de/docs/Web/API/Web_Storage_API). Wir werden auch eine Option enthalten, um den Benutzernamen zu ändern und damit die Begrüßungsnachricht.
 
-1. Fügen Sie in `index.html` die folgende Zeile kurz vor dem {{htmlelement("script")}}-Element ein:
+1. Fügen Sie in `index.html` die folgende Zeile unmittelbar vor dem {{htmlelement("script")}}-Element hinzu:
 
    ```html
    <button>Change user</button>
    ```
 
-2. Platzieren Sie in `main.js` den folgenden Code am Ende der Datei, genau so, wie er geschrieben ist. Dies erstellt Referenzen zum neuen Button und zur Überschrift und speichert jede in Variablen:
+2. Fügen Sie in `main.js` den folgenden Code am unteren Rand der Datei genau so hinzu, wie er geschrieben ist. Dies erstellt Referenzen für die neue Schaltfläche und die Überschrift und speichert sie jeweils in Variablen.
 
    ```js
    let myButton = document.querySelector("button");
    let myHeading = document.querySelector("h1");
    ```
 
-3. Fügen Sie die folgende Funktion hinzu, um die personalisierte Begrüßung festzulegen. Dies wird noch nichts tun; wir werden die Funktion später aufrufen.
+3. Fügen Sie die folgende Funktion hinzu, um die personalisierte Begrüßung einzustellen. Dies wird noch nichts tun; wir werden die Funktion später aufrufen.
 
    ```js
    function setUserName() {
@@ -438,9 +428,9 @@ Nächste, lasst uns die Seitenüberschrift in eine personalisierte Begrüßungsn
    }
    ```
 
-   Die `setUserName()`-Funktion enthält eine [`prompt()`](/de/docs/Web/API/Window/prompt)-Funktion, die ein Dialogfeld ähnlich wie `alert()` zeigt. Diese `prompt()`-Funktion tut mehr als `alert()`, indem sie den Benutzer auffordert, Daten einzugeben und speichert sie in einer Variablen, nachdem der Benutzer auf _OK_ geklickt hat. In diesem Fall bitten wir den Benutzer, einen Namen einzugeben. Als nächstes ruft der Code auf die `localStorage`-API, die uns erlaubt, Daten im Browser zu speichern und später abzurufen. Wir benutzen die `setItem()`-Funktion von `localStorage`, um ein Datenitem namens `"name"` zu erstellen und es auf den Wert der `myName`-Variablen zu setzen, der den Benutzereingabename enthält. Schließlich setzen wir die `textContent`-Eigenschaft der Überschrift auf eine Zeichenkette plus den neu gespeicherten Namen des Benutzers.
+   Die `setUserName()`-Funktion enthält eine [`prompt()`](/de/docs/Web/API/Window/prompt)-Funktion, die ein Dialogfeld anzeigt, ähnlich wie `alert()`. Diese `prompt()`-Funktion tut mehr als `alert()`, indem sie den Benutzer auffordert, Daten einzugeben und sie in einer Variablen speichert, nachdem der Benutzer auf _OK_ geklickt hat. In diesem Fall fragen wir den Benutzer, einen Namen einzugeben. Als Nächstes ruft der Code die `localStorage`-API auf, die es uns ermöglicht, Daten im Browser zu speichern und sie später abzurufen. Wir verwenden die Methode `setItem()` der lokalen Speicherung, um ein Datenelement namens `"name"` zu erstellen und zu speichern, wobei wir seine Wertigkeit auf die `myName`-Variable setzen, die die Namenvorgabe des Benutzers enthält. Schließlich setzen wir den `textContent` der Überschrift auf eine Zeichenkette und den neu gespeicherten Namen des Benutzers.
 
-4. Fügen Sie den folgenden Bedingungsblock nach der Funktionsdeklaration hinzu. Wir können dies als Initialisierungscode bezeichnen, da es die App strukturiert, wenn sie zum ersten Mal geladen wird.
+4. Fügen Sie den folgenden Bedingungsblock nach der Funktionsdeklaration hinzu. Wir könnten dies Initialisierungscode nennen, da es die App strukturiert, wenn sie zum ersten Mal geladen wird.
 
    ```js
    if (!localStorage.getItem("name")) {
@@ -451,9 +441,9 @@ Nächste, lasst uns die Seitenüberschrift in eine personalisierte Begrüßungsn
    }
    ```
 
-   Die erste Zeile dieses Blocks verwendet den Negationsoperator (logisches NICHT, dargestellt durch `!`), um zu überprüfen, ob das `name`-Datenitem bereits in `localStorage` gespeichert ist. Wenn nicht, wird die `setUserName()`-Funktion ausgeführt, um sie zu erstellen. Wenn es existiert (d.h. der Benutzer hat während eines vorherigen Besuchs einen Benutzernamen festgelegt), rufen wir den gespeicherten Namen mit `getItem()` ab und setzen die `textContent`-Eigenschaft der Überschrift auf eine Zeichenkette plus den Namen des Benutzers, wie wir es innerhalb von `setUserName()` gemacht haben.
+   Die erste Zeile dieses Blocks verwendet den Negationsoperator (logisches NOT, dargestellt durch das `!`), um zu überprüfen, ob das `name`-Datenelement bereits im `localStorage` gespeichert ist. Wenn nicht, wird die `setUserName()`-Funktion ausgeführt, um sie zu erstellen. Wenn es existiert (d. h., der Benutzer einen Namen bei einem vorherigen Besuch gesetzt hat), rufen wir den gespeicherten Namen mit `getItem()` ab und setzen den `textContent` der Überschrift auf eine Zeichenkette und den Benutzernamen setzen, wie wir es innerhalb von `setUserName()` getan haben.
 
-5. Fügen Sie dem Button eine `click`-Ereignis-Handler-Funktion hinzu, wie unten gezeigt. Wenn gedrückt, wird `setUserName()` ausgeführt. Dies ermöglicht dem Benutzer, durch Drücken auf den Button einen anderen Namen einzugeben.
+5. Fügen Sie eine `click` Ereignis-Handler-Funktion der Schaltfläche hinzu, wie unten gezeigt. Wenn sie angeklickt wird, wird `setUserName()` ausgeführt. Dadurch kann der Benutzer einen anderen Namen eingeben, indem er auf die Schaltfläche klickt.
 
    ```js
    myButton.addEventListener("click", () => {
@@ -463,11 +453,11 @@ Nächste, lasst uns die Seitenüberschrift in eine personalisierte Begrüßungsn
 
 ### Ein Benutzername von null?
 
-Wenn Sie das Beispiel ausführen und das Dialogfeld erhalten, das Sie dazu auffordert, Ihren Benutzernamen einzugeben, versuchen Sie den _Abbrechen_-Button zu drücken. Sie sollten dann mit einem Titel enden, der _Mozilla ist cool, null_ liest. Dies geschieht, weil der Wert auf [`null`](/de/docs/Web/JavaScript/Reference/Operators/null) gesetzt wird, wenn Sie die Eingabeaufforderung abbrechen. _null_ ist ein spezieller Wert in JavaScript, der das Fehlen eines Wertes darstellt.
+Wenn Sie das Beispiel ausführen und das Dialogfenster erhalten, das Sie auffordert, Ihren Benutzernamen einzugeben, versuchen Sie, die _Abbrechen_-Schaltfläche zu drücken. Sie sollten mit einem Titel enden, der _Mozilla ist cool, null_ sagt. Dies passiert, weil der Wert als [`null`](/de/docs/Web/JavaScript/Reference/Operators/null) gesetzt wird, wenn Sie die Aufforderung abbrechen. _Null_ ist ein spezieller Wert in JavaScript, der sich auf das Fehlen eines Wertes bezieht.
 
-Versuchen Sie auch, auf _OK_ zu klicken, ohne einen Namen einzugeben. Sie sollten mit einem Titel enden, der _Mozilla ist cool,_ liest, weil Sie `myName` auf einen leeren String gesetzt haben.
+Versuchen Sie auch, auf _OK_ zu klicken, ohne einen Namen einzugeben. Sie sollten mit einem Titel enden, der _Mozilla ist cool,_ sagt, da Sie `myName` auf eine leere Zeichenkette gesetzt haben.
 
-Um diese Probleme zu vermeiden, könnten Sie überprüfen, dass der Benutzer keinen leeren Namen eingegeben hat. Aktualisieren Sie Ihre `setUserName()`-Funktion auf das Folgende:
+Um diese Probleme zu vermeiden, könnten Sie überprüfen, ob der Benutzer keinen leeren Namen eingegeben hat. Aktualisieren Sie Ihre `setUserName()`-Funktion so:
 
 ```js
 function setUserName() {
@@ -481,21 +471,23 @@ function setUserName() {
 }
 ```
 
-In menschlicher Sprache bedeutet dies: Wenn `myName` keinen Wert hat, führen Sie `setUserName()` erneut von Anfang an aus. Wenn es einen Wert hat (wenn die oben genannte Aussage nicht wahr ist), dann speichern Sie den Wert in `localStorage` und setzen ihn als Text der Überschrift.
+In menschlicher Sprache bedeutet das: Wenn `myName` keinen Wert hat, führen Sie `setUserName()` erneut von Anfang an aus. Wenn es einen Wert hat (wenn die obige Aussage nicht wahr ist), dann speichern Sie den Wert in `localStorage` und setzen Sie ihn als den Text der Überschrift.
 
 ## Fazit
 
-Wenn Sie alle Anweisungen in diesem Artikel befolgt haben, sollten Sie mit einer Seite enden, die ungefähr wie das untenstehende Bild aussieht. Sie können auch [unsere Version ansehen](https://mdn.github.io/beginner-html-site-scripted/).
+Wenn Sie alle Anweisungen in diesem Artikel befolgt haben, sollten Sie am Ende eine Seite haben, die wie das Bild unten aussieht. Sie können auch [unsere Version ansehen](https://mdn.github.io/beginner-html-site-scripted/).
 
-![Endgültiges Aussehen der HTML-Seite nach dem Erstellen von Elementen: eine Kopfzeile, großes zentriertes Logo, Inhalt und ein Button](website-screen-scripted.png)
+![Endgültiges Aussehen der HTML-Seite nach dem Erstellen von Elementen: eine Kopfzeile, zentriertes großes Logo, Inhalt und eine Schaltfläche](website-screen-scripted.png)
 
-Falls Sie feststecken, können Sie Ihre Arbeit mit unserem [fertigen Beispielcode auf GitHub](https://github.com/mdn/beginner-html-site-scripted/blob/main/scripts/main.js) vergleichen.
+Wenn Sie stecken bleiben, können Sie Ihre Arbeit mit unserem [fertigen Beispielcode auf GitHub](https://github.com/mdn/beginner-html-site-scripted/blob/main/scripts/main.js) vergleichen.
 
-Wir haben in diesem Artikel nur an der Oberfläche von JavaScript gekratzt. Sie finden viel mehr über JavaScript in unseren [Core](/de/docs/Learn_web_development/Core) und [Erweiterungs](/de/docs/Learn_web_development/Extensions) Modulen, beginnend bei [Dynamisches Scripting mit JavaScript](/de/docs/Learn_web_development/Core/Scripting).
+Jetzt, da Sie Ihre Website fertiggestellt haben, ist der nächste Schritt, sie online zu stellen, damit andere sie ansehen können. Wir zeigen Ihnen, wie Sie dies in unserem nächsten Artikel tun können — [Veröffentlichen Ihrer Website](/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website).
 
 ## Siehe auch
 
-- [Lernen Sie JavaScript](https://learnjavascript.online/)
-  - : Dies ist eine hervorragende Ressource für angehende Webentwickler! Lernen Sie JavaScript in einer interaktiven Umgebung mit kurzen Lektionen und interaktiven Tests, geführt durch eine automatisierte Bewertung. Die ersten 40 Lektionen sind kostenlos. Der vollständige Kurs ist für eine kleine einmalige Zahlung verfügbar.
+- [Dynamisches Skripting mit JavaScript](/de/docs/Learn_web_development/Core/Scripting)
+  - : Wir haben in diesem Artikel nur an der Oberfläche von JavaScript gekratzt. Im weiteren Verlauf unseres Lernpfads finden Sie viel mehr JavaScript, beginnend mit unserem Modul _Dynamisches Skripting mit JavaScript_.
+- [Learn JavaScript](https://learnjavascript.online/)
+  - : Dies ist eine hervorragende Ressource für angehende Webentwickler! Lernen Sie JavaScript in einer interaktiven Umgebung mit kurzen Lektionen und interaktiven Tests, angeleitet von einer automatisierten Beurteilung. Die ersten 40 Lektionen sind kostenlos. Der vollständige Kurs ist für eine geringe Einmalzahlung verfügbar.
 
 {{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Styling_the_content", "Learn_web_development/Getting_started/Your_first_website/Publishing_your_website", "Learn_web_development/Getting_started/Your_first_website")}}
diff --git a/files/de/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md b/files/de/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
index c6303ba3a..111cc55d0 100644
--- a/files/de/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
+++ b/files/de/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
@@ -1,33 +1,36 @@
 ---
-title: Veröffentlichung Ihrer Website
+title: Veröffentlichen Ihrer Website
 slug: Learn_web_development/Getting_started/Your_first_website/Publishing_your_website
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 12c76ea107c3caacd28c39e33b9ab2dd879f0855
 ---
 
 {{LearnSidebar}}
 
 {{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Adding_interactivity", "Learn_web_development/Getting_started/Web_standards", "Learn_web_development/Getting_started/Your_first_website")}}
 
-Sobald Sie den Code geschrieben und die Dateien organisiert haben, die Ihre Website ausmachen, müssen Sie alles online stellen, damit die Leute sie finden können. Dieser Artikel erklärt, wie Sie Ihre Beispielseite mit wenig Aufwand online stellen können.
+Sobald Sie den Code Ihrer Website geschrieben und die Dateien organisiert haben, müssen Sie alles online stellen, damit Menschen es finden können. Dieser Artikel erklärt, wie Sie Ihre Beispiel-Website mit geringem Aufwand online stellen können.
+
+> [!NOTE]
+> Sie benötigen eine Beispiel-Website auf Ihrem lokalen Computer, um diesem Artikel folgen zu können. Sie sollte mindestens eine gültige `index.html`-Datei enthalten. Wenn Sie dies noch nicht getan haben, empfehlen wir Ihnen, eine zu erstellen, indem Sie die vorherigen Artikel in diesem Modul durcharbeiten, beginnend mit [Wie wird Ihre Website aussehen?](/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like).
 
 <table>
   <tbody>
     <tr>
       <th scope="row">Voraussetzungen:</th>
       <td>
-        Grundlegende Vertrautheit mit Ihrem Computer-Betriebssystem, der Basissoftware, die Sie zum Erstellen einer Website verwenden, und Dateisystemen.
+        Grundlegende Vertrautheit mit Ihrem Computer-Betriebssystem, der grundlegenden Software, die Sie zum Erstellen einer Website verwenden, und den Dateisystemen.
       </td>
     </tr>
     <tr>
       <th scope="row">Lernziele:</th>
       <td>
         <ul>
-          <li>Die grundlegenden Werkzeuge und Konzepte beim Veröffentlichen einer Website — Hosting, Domains, FTP-Programme.</li>
-          <li>Welche alternativen Hosting-Optionen verfügbar sind, zum Beispiel Google App Engine, GitHub, und CodePen.</li>
-          <li>Veröffentlichung einer Website mit GitHub Pages.</li>
-          <li>Hosting, wie man es erwirbt und wie man eine Website online stellt.</li>
-          <li>TLDs und wie man eine Domain registriert.</li>
+          <li>Die grundlegenden Werkzeuge und Konzepte, die bei der Veröffentlichung einer Website involviert sind — Hosting, Domains, FTP-Programme.</li>
+          <li>Welche alternativen Hosting-Optionen verfügbar sind, zum Beispiel Google App Engine, GitHub und CodePen.</li>
+          <li>Veröffentlichen einer Website mit GitHub Pages.</li>
+          <li>Hosting, wie man es kauft und wie man eine Website online stellt.</li>
+          <li>Wie man eine Domain registriert.</li>
         </ul>
       </td>
     </tr>
@@ -36,76 +39,81 @@ Sobald Sie den Code geschrieben und die Dateien organisiert haben, die Ihre Webs
 
 ## Welche Optionen gibt es?
 
-Die Veröffentlichung einer Website ist ein komplexes Thema, da es viele Wege gibt, sie anzugehen. Dieser Artikel versucht nicht, alle möglichen Methoden zu dokumentieren. Stattdessen werden die Vor- und Nachteile von drei Ansätzen erläutert, die für Anfänger praktisch sind. Anschließend wird ein Verfahren beschrieben, das sofort für viele Leser funktionieren kann.
+Eine Website zu veröffentlichen ist ein komplexes Thema, da es viele verschiedene Ansätze gibt. Dieser Artikel versucht nicht, alle möglichen Methoden zu dokumentieren. Stattdessen erklärt er die Vor- und Nachteile von drei Ansätzen, die für Anfänger praktisch sind. Danach wird eine Methode vorgestellt, die für viele Leser sofort funktionieren kann.
 
 ### Hosting und einen Domainnamen erhalten
 
-Um mehr Kontrolle über Inhalt und Erscheinungsbild der Website zu haben, wählen die meisten Menschen, Webhosting und einen Domainnamen zu kaufen:
+Um mehr Kontrolle über den Inhalt und das Erscheinungsbild einer Website zu haben, entscheiden sich die meisten Fachleute und Unternehmen dafür, Webhosting und einen Domainnamen zu kaufen:
 
-- Webhosting ist gemieteter Speicherplatz auf dem [Webserver](/de/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server) eines Hosting-Unternehmens. Sie laden die Website-Dateien auf den Webserver hoch. Der Webserver stellt den Website-Besuchern die Inhalte zur Verfügung.
-- Ein [Domainname](/de/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name) ist die einzigartige Adresse, unter der Menschen Ihre Website finden, wie z.B. `https://www.mozilla.org` oder `https://www.bbc.co.uk`. Sie können Ihren Domainnamen von einem **Domainregistrar** für so viele Jahre mieten, wie Sie möchten.
+- Webhosting ist gemieteter Speicherplatz auf einem [Web-Server](/de/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server) eines Hosting-Anbieters. Sie legen die Website-Dateien auf den Web-Server. Der Web-Server stellt die Website-Inhalte den Website-Besuchern zur Verfügung.
+- Ein [Domainname](/de/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name) ist die einzigartige Webadresse, unter der Menschen Ihre Website finden, wie `https://www.mozilla.org` oder `https://www.bbc.co.uk`. Sie können Ihren Domainnamen für so viele Jahre mieten, wie Sie möchten, bei einem **Domain-Registrar**.
 
-Viele professionelle Websites gehen auf diese Weise online.
+Wenn Sie Ihr Webhosting _und_ Ihren Domainnamen von derselben Firma erhalten, sind sie in der Regel automatisch so konfiguriert, dass sie miteinander kommunizieren. Wenn Sie sie jedoch von verschiedenen Firmen erhalten oder Ihr Hosting zu einer anderen Firma wechseln möchten, müssen Sie einige Einstellungen vornehmen, um den Domainnamen auf den korrekten Server zu verweisen. Dies geschieht normalerweise, indem Sie sich auf der Website Ihres Domain-Registrars einloggen und die [Nameserver](https://kinsta.com/knowledgebase/what-is-a-nameserver/) Ihres Domainnamens auf die von Ihrem Hosting-Anbieter angegebenen ändern.
 
-Zusätzlich benötigen Sie ein {{Glossary("FTP", "File Transfer Protocol (FTP)")}}-Programm (siehe [Wie viel kostet: Software](/de/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost#software) für weitere Details), um die Website-Dateien tatsächlich auf den Server zu übertragen. FTP-Programme variieren stark, aber im Allgemeinen müssen Sie sich mit den von Ihrem Hosting-Unternehmen bereitgestellten Details (normalerweise Benutzername, Passwort, Hostname) mit Ihrem Webserver verbinden. Dann zeigt Ihnen das Programm Ihre lokalen Dateien und die Dateien des Webservers in zwei Fenstern und bietet eine Möglichkeit, Dateien hin und her zu transferieren.
+Unternehmen verwenden verschiedene Mechanismen, um Dateien auf ihre Web-Server zu übertragen. Viele bieten mehr als eine Option an; typische Optionen umfassen:
 
-![Ein FTP-Client, der alle Dateien und Ordner einer Website zeigt und diese auf einen Server hochlädt](ftp.jpg)
+- Eine Drag-and-Drop-Oberfläche (ein Beispiel hierfür sehen Sie später unter [Veröffentlichung über GitHub](#veröffentlichen_über_github)).
+- Ein {{Glossary("FTP", "File Transfer Protocol (FTP)")}}-Programm. FTP-Programme variieren stark, aber im Allgemeinen müssen Sie eine Verbindung zu Ihrem Web-Server mit den von Ihrem Hosting-Unternehmen bereitgestellten Details herstellen (in der Regel Benutzername, Passwort, Hostname). Dann zeigt Ihnen das Programm Ihre lokalen Dateien und die Dateien des Web-Servers in zwei Fenstern an und bietet eine Möglichkeit, Dateien hin und her zu übertragen.
+- Das Speichern des Website-Quellcodes in einem GitHub-Repository (siehe unten) und dem Hosting-Unternehmen Zugriff gewähren, damit es den Quellcode abrufen, bei Bedarf bauen und veröffentlichen kann.
+- Einige Unternehmen bieten [Kommandozeilen-Werkzeuge](/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) an, mit denen Sie Ihre Dateien übertragen können.
 
 #### Tipps zur Suche nach Hosting und Domains
 
-- MDN fördert keine speziellen kommerziellen Hosting-Unternehmen oder Domainregistrare. Um Hosting-Unternehmen und Registrare zu finden, suchen Sie einfach nach "Webhosting" und "Domainnamen". Alle Registrare werden über eine Funktion verfügen, mit der Sie überprüfen können, ob der gewünschte Domainname verfügbar ist.
-- Ihr privater oder geschäftlicher {{Glossary("ISP", "Internetdienstanbieter")}} bietet möglicherweise begrenztes Hosting für eine kleine Website an. Das verfügbare Funktionsset wird begrenzt sein, aber es könnte perfekt für Ihre ersten Experimente sein.
-- Es gibt auch kostenlose Dienste wie [Neocities](https://neocities.org/), [Google Sites](https://sites.google.com/), [Blogger](https://www.blogger.com/) und [WordPress](https://wordpress.com/). Manchmal bekommt man, wofür man bezahlt, aber manchmal sind diese Ressourcen gut genug für Ihre ersten Experimente.
-- Viele Unternehmen bieten Hosting und Domains an.
+- MDN bewirbt keine spezifischen kommerziellen Hosting-Unternehmen oder Domain-Registrare. Um Hosting-Unternehmen und Registrare zu finden, suchen Sie einfach nach "Webhosting" und "Domainnamen". Alle Registrare bieten eine Funktion, um zu überprüfen, ob der gewünschte Domainname verfügbar ist.
+- Ihr {{Glossary("ISP", "Internetdienstanbieter")}} zu Hause oder im Büro bietet möglicherweise eingeschränktes Hosting für eine kleine Website. Der verfügbare Funktionsumfang ist begrenzt, aber für Ihre ersten Experimente könnte es perfekt sein.
+- Es gibt auch kostenlose Dienste wie [Neocities](https://neocities.org/), [Google Sites](https://sites.google.com/) und [WordPress](https://wordpress.com/). Solche Dienste können im Umfang begrenzt sein, sind aber gut genug für erste Experimente.
 
 ### Verwendung eines Online-Tools wie GitHub oder Google App Engine
 
 Einige Tools ermöglichen es Ihnen, Ihre Website online zu veröffentlichen:
 
-- [GitHub](https://github.com/) ist eine "soziale Codierungs"-Seite. Sie ermöglicht es Ihnen, Code-Repositories für die Speicherung im **Versionskontrollsystem** [Git](https://git-scm.com/) hochzuladen. Sie können dann an Codeprojekten zusammenarbeiten und das System ist standardmäßig Open Source, was bedeutet, dass jeder in der Welt Ihren GitHub-Code finden, nutzen, davon lernen und verbessern kann. GitHub verfügt über eine sehr nützliche Funktion namens [GitHub Pages](https://pages.github.com/), mit der Sie Website-Code live im Web anzeigen können.
-- [Google App Engine](https://cloud.google.com/appengine/) ist eine leistungsstarke Plattform, die es Ihnen ermöglicht, Anwendungen auf der Infrastruktur von Google zu erstellen und auszuführen — sei es, um eine mehrstufige Webanwendung von Grund auf neu zu erstellen oder eine statische Website zu hosten. Weitere Informationen finden Sie unter [Wie hosten Sie Ihre Website auf Google App Engine?](/de/docs/Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine).
+- [GitHub](https://github.com/) ist eine "soziale Codierungs"-Plattform. Sie ermöglicht es Ihnen, Code-Repositories im [Git](https://git-scm.com/) **Versionskontrollsystem** hochzuladen. Sie können dann an Codeprojekten zusammenarbeiten, und das System ist standardmäßig quelloffen, was bedeutet, dass jeder auf der Welt Ihren GitHub-Code finden, verwenden, davon lernen und ihn verbessern kann. GitHub hat eine sehr nützliche Funktion namens [GitHub Pages](https://pages.github.com/), die es Ihnen ermöglicht, Website-Code live im Web zu veröffentlichen.
+- [Google App Engine](https://cloud.google.com/appengine/) ist eine leistungsstarke Plattform, die es Ihnen ermöglicht, Anwendungen auf der Infrastruktur von Google zu erstellen und auszuführen — egal ob Sie eine mehrstufige Webanwendung von Grund auf erstellen oder eine statische Website hosten möchten. Weitere Informationen finden Sie unter [Wie wird Ihre Website auf Google App Engine gehostet?](/de/docs/Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine).
 
-Diese Optionen sind normalerweise kostenlos, aber Sie könnten das begrenzte Funktionsset überschreiten.
+Diese Optionen sind in der Regel kostenlos, mit einem eingeschränkten Funktionsumfang.
 
-### Verwendung eines webbasierten IDE wie CodePen
+### Verwendung einer webbasierten IDE wie CodePen
 
-Es gibt eine Reihe von Web-Apps, die eine Website-Entwicklungsumgebung emulieren und es ermöglichen, HTML, CSS und JavaScript einzugeben und das Ergebnis dieses Codes als Website anzuzeigen — alles in einem Browser-Tab. Im Allgemeinen sind diese Tools relativ einfach, großartig zum Lernen, gut zum Teilen von Code (zum Beispiel, wenn Sie eine Technik teilen oder Hilfe beim Debuggen von Kollegen in einem anderen Büro fragen wollen) und kostenlos (für grundlegende Funktionen). Sie hosten Ihre gerenderte Seite unter einer eindeutigen Webadresse. Allerdings sind die Funktionen begrenzt und diese Apps bieten normalerweise keinen Hosting-Speicherplatz für Assets (wie Bilder).
+Es gibt eine Reihe von Web-Apps, die eine Website-Entwicklungsumgebung emulieren und es Ihnen ermöglichen, HTML, CSS und JavaScript zu schreiben, das dann gerendert und in einem Ausgabefenster angezeigt wird. Generell sind diese Tools einfach zu verwenden, hervorragend zum Lernen geeignet, gut zum Teilen von Code (zum Beispiel, wenn Sie eine Technik mit Kollegen in einem anderen Büro teilen oder Debugging-Hilfe anfordern möchten), und kostenlos (für grundlegende Funktionen). Sie hosten Ihre gerenderte Seite unter einer einzigartigen Webadresse. Die Funktionsvielfalt ist jedoch begrenzt, und diese Apps bieten oft keinen Speicherplatz für Assets (wie Bilder).
 
-Versuchen Sie, mit einigen dieser Beispiele zu spielen, um herauszufinden, welches für Sie am besten funktioniert:
+Probieren Sie einige dieser Beispiele aus, um herauszufinden, welches für Sie am besten funktioniert:
 
 - [JSFiddle](https://jsfiddle.net/)
 - [Glitch](https://glitch.com/)
 - [JS Bin](https://jsbin.com/)
 - [CodePen](https://codepen.io/)
 
-![Screenshot der webbasierten IDE JS Bin](jsbin-screen.png)
-
-## Veröffentlichung über GitHub
+## Veröffentlichen über GitHub
 
-Werfen wir nun einen Blick darauf, wie Sie Ihre Website einfach über GitHub Pages veröffentlichen können.
+Sehen wir uns nun an, wie Sie Ihre Website über GitHub Pages veröffentlichen können.
 
 1. Melden Sie sich zunächst bei [GitHub](https://github.com/) an und verifizieren Sie Ihre E-Mail-Adresse.
-2. Als nächstes müssen Sie [ein Repository erstellen](https://github.com/new), um Dateien zu speichern.
-3. Geben Sie auf dieser Seite im Feld _Repository name_ den Namen _username_.github.io ein, wobei _username_ ihr Benutzername ist. Zum Beispiel würde unser Freund Bob Smith _bobsmith.github.io_ eingeben.
-   Markieren Sie das Feld "_Initialize this repository with a README_". Klicken Sie dann auf _Create repository_.
-   ![Ein Beispiel einer GitHub-Repository-Seite](github-create-repo.png)
-4. Ziehen Sie den Inhalt Ihres Website-Ordners in Ihr Repository und klicken Sie dann auf _Commit changes_.
-
-   > [!NOTE]
-   > Stellen Sie sicher, dass Ihr Ordner eine Datei `index.html` enthält.
-
-5. Navigieren Sie Ihren Browser zu _username_.github.io, um Ihre Website online zu sehen. Für den Benutzernamen _chrisdavidmills_ gehen Sie zu [_chrisdavidmills_.github.io](https://chrisdavidmills.github.io/).
+2. Als nächstes müssen Sie ein [Repository erstellen](https://github.com/new), um die Dateien zu speichern. Auf dieser Seite:
+   1. Geben Sie im Feld _Repository name_ _username_.github.io ein, wobei _username_ Ihr Benutzername ist. Zum Beispiel würde unser Freund Bob Smith _bobsmith.github.io_ eingeben.
+   2. Klicken Sie unten auf der Seite auf die Schaltfläche _Create repository_.
+3. Auf der nächsten Seite finden Sie den Link _uploading an existing file_ und klicken Sie darauf. Dies sollte Sie zur Datei-Upload-Seite bringen.
+4. Zu diesem Zeitpunkt sollten Sie in der Lage sein, Dateien von Ihrem lokalen Dateisystem auf die Webseite zu ziehen und abzulegen, um sie in das GitHub-Repository hochzuladen. Um dies zu tun:
+   1. Öffnen Sie ein Dateiexplorer/Finder-Fenster auf Ihrem Computer.
+   2. Stellen Sie sicher, dass Sie das Dateiexplorer- _und_ das Webbrowser-Fenster sehen können — positionieren Sie sie nebeneinander auf Ihrem Bildschirm.
+   3. Navigieren Sie das Dateiexplorer-Fenster zu dem Ordner, der Ihre Beispiel-Website enthält.
+      > [!NOTE]
+      > Stellen Sie sicher, dass Ihr Ordner eine `index.html`-Datei enthält.
+   4. Wählen Sie alle Dateien Ihrer Beispiel-Website aus (zum Beispiel durch die Tastenkombination <kbd>Strg</kbd> + <kbd>A</kbd>, oder <kbd>Cmd</kbd> + <kbd>A</kbd> auf macOS).
+   5. Ziehen Sie die Dateien von Ihrem Dateiexplorer über den Abschnitt "Drag files here to add them to your repository" der GitHub-Seite.
+   6. Der Rahmen und der Text des Abschnitts ändert sich, um anzuzeigen, dass ein Abwurf möglich ist. Lassen Sie die Dateien an diesem Punkt fallen.
+   7. Klicken Sie unten auf der Seite auf die Schaltfläche _Commit changes_.
+5. Navigieren Sie in Ihrem Browser zu _username_.github.io, um Ihre Website online zu sehen. Zum Beispiel für den Benutzernamen _chrisdavidmills_, gehen Sie zu [_chrisdavidmills_.github.io](https://chrisdavidmills.github.io/).
 
    > [!NOTE]
-   > Es kann einige Minuten dauern, bis Ihre Website online ist. Wenn Ihre Website nicht sofort angezeigt wird, warten Sie ein paar Minuten. Versuchen Sie es erneut.
+   > Es kann ein paar Minuten dauern, bis Ihre Website online ist. Wenn Ihre Website nicht sofort angezeigt wird, warten Sie ein paar Minuten und versuchen Sie es erneut.
 
-Um mehr zu erfahren, besuchen Sie [GitHub Pages Hilfe](https://docs.github.com/en/pages/getting-started-with-github-pages).
+Um mehr zu erfahren, siehe [GitHub Pages Hilfe](https://docs.github.com/en/pages/getting-started-with-github-pages).
 
 ## Weiterführende Literatur
 
-- [Was ist ein Webserver?](/de/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server)
-- [Domainnamen verstehen](/de/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name)
-- [Wie viel kostet es, etwas im Web zu tun?](/de/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost)
-- [Deploy a Website](https://www.codecademy.com/learn/deploy-a-website): Ein schönes Tutorial von Codecademy, das etwas weitergeht und einige zusätzliche Techniken zeigt.
+- [Was ist ein Webserver](/de/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server)
+- [Verstehen von Domainnamen](/de/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name)
+- [Wie viel kostet es, etwas im Web zu machen?](/de/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost)
+- [Eine Website bereitstellen](https://www.codecademy.com/learn/deploy-a-website): Ein schönes Tutorial von Codecademy, das noch etwas weiter geht und einige zusätzliche Techniken zeigt.
 
 {{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Adding_interactivity", "Learn_web_development/Getting_started/Web_standards", "Learn_web_development/Getting_started/Your_first_website")}}
diff --git a/files/de/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/de/web/api/canvasrenderingcontext2d/textbaseline/index.md
index f780f1de8..c6cf91b1a 100644
--- a/files/de/web/api/canvasrenderingcontext2d/textbaseline/index.md
+++ b/files/de/web/api/canvasrenderingcontext2d/textbaseline/index.md
@@ -3,7 +3,7 @@ title: "CanvasRenderingContext2D: textBaseline-Eigenschaft"
 short-title: textBaseline
 slug: Web/API/CanvasRenderingContext2D/textBaseline
 l10n:
-  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+  sourceCommit: 0a4d5b451cc54599ed2b99cef4fdd39c3fd96a3d
 ---
 
 {{APIRef}}
@@ -15,17 +15,17 @@ Die **`CanvasRenderingContext2D.textBaseline`**-Eigenschaft der Canvas 2D API le
 Mögliche Werte:
 
 - `"top"`
-  - : Die Text-Basislinie ist die Oberseite des "em"-Quadrats.
+  - : Die Text-Basislinie ist der obere Rand des Em-Quadrats.
 - `"hanging"`
-  - : Die Text-Basislinie ist die hängende Basislinie. (Wird von tibetischen und anderen indischen Schriften verwendet.)
+  - : Die Text-Basislinie ist die hängende Basislinie. (Wird von tibetischen und anderen indischen Schriftsystemen verwendet.)
 - `"middle"`
-  - : Die Text-Basislinie ist die Mitte des "em"-Quadrats.
+  - : Die Text-Basislinie ist die Mitte des Em-Quadrats.
 - `"alphabetic"`
-  - : Die Text-Basislinie ist die normale alphabetische Basislinie. Standardwert.
+  - : Die Text-Basislinie ist die normale {{Glossary("/Baseline/Typography", "alphabetische Basislinie")}}. Standardwert.
 - `"ideographic"`
-  - : Die Text-Basislinie ist die ideographische Basislinie; dies ist der Boden des Hauptkörpers der Zeichen, wenn der Hauptkörper der Zeichen unterhalb der alphabetischen Basislinie hervorsteht. (Wird von chinesischen, japanischen und koreanischen Schriften verwendet.)
+  - : Die Text-Basislinie ist die ideografische Basislinie; dies ist der untere Rand des Hauptkörpers der Zeichen, falls der Hauptkörper der Zeichen unter die alphabetische Basislinie herausragt. (Wird von chinesischen, japanischen und koreanischen Schriftsystemen verwendet.)
 - `"bottom"`
-  - : Die Text-Basislinie ist die Unterseite des Begrenzungsrahmens. Dies unterscheidet sich von der ideographischen Basislinie darin, dass die ideographische Basislinie keine Abstriche berücksichtigt.
+  - : Die Text-Basislinie ist der untere Rand der Begrenzungsrahmen. Dies unterscheidet sich von der ideografischen Basislinie, da diese keine Unterlängen berücksichtigt.
 
 Der Standardwert ist `"alphabetic"`.
 
@@ -33,7 +33,7 @@ Der Standardwert ist `"alphabetic"`.
 
 ### Vergleich der Eigenschaftswerte
 
-Dieses Beispiel zeigt die verschiedenen Werte der `textBaseline`-Eigenschaft.
+Dieses Beispiel zeigt die verschiedenen `textBaseline`-Eigenschaftswerte.
 
 #### HTML
 
@@ -75,7 +75,7 @@ baselines.forEach((baseline, index) => {
 
 ### Vergleich der Eigenschaftswerte auf derselben Linie
 
-Wie im vorherigen Beispiel zeigt dieses Beispiel die verschiedenen Werte der `textBaseline`-Eigenschaft, jedoch in diesem Fall alle horizontal auf derselben Linie ausgerichtet - um es einfacher zu machen, die Unterschiede zu erkennen.
+Wie im vorherigen Beispiel zeigt dieses Beispiel die verschiedenen `textBaseline`-Eigenschaftswerte, jedoch in diesem Fall mit allen horizontal entlang derselben Linie angeordnet — um es einfacher zu machen zu sehen, wie sie sich voneinander unterscheiden.
 
 #### HTML
 
@@ -130,4 +130,4 @@ baselines.forEach((baseline, index) => {
 
 ## Siehe auch
 
-- Das Interface, das diese Eigenschaft definiert: [`CanvasRenderingContext2D`](/de/docs/Web/API/CanvasRenderingContext2D)
+- Die Schnittstelle, die diese Eigenschaft definiert: [`CanvasRenderingContext2D`](/de/docs/Web/API/CanvasRenderingContext2D)
diff --git a/files/de/web/api/css_painting_api/guide/index.md b/files/de/web/api/css_painting_api/guide/index.md
index 4e9b0952f..d599bb531 100644
--- a/files/de/web/api/css_painting_api/guide/index.md
+++ b/files/de/web/api/css_painting_api/guide/index.md
@@ -1,47 +1,48 @@
 ---
-title: Verwendung der CSS Painting API
+title: Verwenden der CSS Painting API
 slug: Web/API/CSS_Painting_API/Guide
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: bad620560c435cae3d3436b9b01ff654680af9a3
 ---
 
 {{DefaultAPISidebar("CSS Painting API")}}
-Die [CSS Paint API](/de/docs/Web/API/CSS_Painting_API) wurde entwickelt, um Entwicklern zu ermöglichen, programmatisch Bilder zu definieren, die überall dort verwendet werden können, wo ein CSS-Bild aufgerufen werden kann, wie z. B. CSS [`background-image`](/de/docs/Web/CSS/background-image), [`border-image`](/de/docs/Web/CSS/border-image-source), [`mask-image`](/de/docs/Web/CSS/mask-image) usw.
 
-Um programmatisch ein Bild zu erstellen, das von einem CSS-Stylesheet verwendet wird, müssen wir einige Schritte durchlaufen:
+Die [CSS Paint API](/de/docs/Web/API/CSS_Painting_API) ist darauf ausgelegt, Entwicklern zu ermöglichen, programmatisch Bilder zu definieren, die überall dort verwendet werden können, wo ein CSS-Bild aufgerufen werden kann, wie z. B. CSS {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("mask-image")}}, usw.
 
-1. Definieren Sie ein Paint-Worklet mit der Funktion [`registerPaint()`](/de/docs/Web/API/PaintWorkletGlobalScope/registerPaint)
+Um programmatisch ein Bild zu erstellen, das von einem CSS-Stylesheet verwendet wird, müssen wir ein paar Schritte durchlaufen:
+
+1. Definieren Sie ein Paint Worklet mithilfe der Funktion [`registerPaint()`](/de/docs/Web/API/PaintWorkletGlobalScope/registerPaint)
 2. Registrieren Sie das Worklet
-3. Integrieren Sie die `{{cssxref("image/paint","paint()")}}` CSS-Funktion
+3. Integrieren Sie die {{cssxref('image/paint', 'paint()')}} CSS-Funktion
 
-Um diese Schritte zu erläutern, beginnen wir mit der Erstellung eines halb-hervorgehobenen Hintergrunds, wie bei diesem Header:
+Um diese Schritte zu veranschaulichen, beginnen wir mit dem Erstellen eines halb-hervorgehobenen Hintergrunds, wie in dieser Überschrift:
 
-![Text mit der Aufschrift 'My Cool Header' mit einem soliden gelben Hintergrundbildblock auf dem unteren linken Drittel des Headers](mycoolheader.png)
+![Text mit der Aufschrift 'My Cool Header' mit einem soliden gelben Hintergrundbildblock am unteren linken Drittel der Überschrift](mycoolheader.png)
 
 > [!NOTE]
-> Der vollständige Quellcode für alle Beispiele in diesem Artikel ist unter [https://github.com/mdn/dom-examples/tree/main/css-painting](https://github.com/mdn/dom-examples/tree/main/css-painting) zu finden, und die Beispiele sind live unter [https://mdn.github.io/dom-examples/css-painting/](https://mdn.github.io/dom-examples/css-painting/) verfügbar.
+> Sehen Sie sich das [Beispiel der CSS Painting API](https://mdn.github.io/dom-examples/css-painting/) für eine vollständige funktionsfähige Demo sowie den [Quellcode](https://github.com/mdn/dom-examples/tree/main/css-painting) an.
 
 ## CSS Paint Worklet
 
-In einer externen Skriptdatei verwenden wir die Funktion [`registerPaint()`](/de/docs/Web/API/PaintWorkletGlobalScope/registerPaint), um unser [CSS Paint Worklet](/de/docs/Web/API/Worklet) zu benennen. Es nimmt zwei Parameter entgegen. Der erste ist der Name, den wir dem Worklet geben – dies ist der Name, den wir in unserem CSS als Parameter der `paint()`-Funktion verwenden werden, wenn wir dieses Styling auf ein Element anwenden möchten. Der zweite Parameter ist die Klasse, die alle magischen Funktionen definiert, die Kontextoptionen und was auf die zweidimensionale Leinwand gemalt werden soll, die unser Bild sein wird.
+In einer externen Skriptdatei verwenden wir die Funktion [`registerPaint()`](/de/docs/Web/API/PaintWorkletGlobalScope/registerPaint), um unser [CSS Paint Worklet](/de/docs/Web/API/Worklet) zu benennen. Es nimmt zwei Parameter an. Der erste ist der Name, den wir dem Worklet geben — dies ist der Name, den wir in unserem CSS als Parameter der `paint()`-Funktion verwenden, wenn wir dieses Styling auf ein Element anwenden möchten. Der zweite Parameter ist die Klasse, die alle wesentlichen Funktionen definiert, einschließlich der Kontextoptionen und des zu malenden Inhalts auf die zweidimensionale Leinwand, die unser Bild sein wird.
 
 ```js
 registerPaint(
   "headerHighlight",
   class {
     /*
-       define if alpha transparency is allowed alpha
-       is set to true by default. If set to false, all
-       colors used on the canvas will be fully opaque
-    */
+     * define if alpha transparency is allowed alpha
+     * is set to true by default. If set to false, all
+     * colors used on the canvas will be fully opaque
+     */
     static get contextOptions() {
       return { alpha: true };
     }
 
     /*
-        ctx is the 2D drawing context
-        a subset of the HTML Canvas API.
-    */
+     * ctx is the 2D drawing context
+     * a subset of the HTML Canvas API.
+     */
     paint(ctx) {
       ctx.fillStyle = "hsl(55 90% 60% / 100%)";
       ctx.fillRect(0, 15, 200, 20); /* order: x, y, w, h */
@@ -50,41 +51,41 @@ registerPaint(
 );
 ```
 
-In diesem Klassenbeispiel haben wir eine einzige Kontextoption mit der Funktion `contextOptions()` definiert: Wir haben ein Objekt zurückgegeben, das angibt, dass Alphatransparenz erlaubt ist.
+In diesem Klassenbeispiel haben wir eine einzelne Kontextoption mit der Funktion `contextOptions()` definiert: Wir gaben ein Objekt zurück, das besagt, dass Alphatransparenz zulässig ist.
 
-Wir haben dann die Funktion `paint()` verwendet, um auf unsere Leinwand zu malen.
+Wir haben dann die `paint()`-Funktion verwendet, um auf unsere Leinwand zu malen.
 
-Eine `paint()`-Funktion kann drei Argumente annehmen. Hier haben wir ein Argument bereitgestellt: den Rendering-Kontext (wir werden uns später noch ein paar weitere ansehen), der oft durch den Variablennamen `ctx` bezieht. Der 2D-Rendering-Kontext ist ein Unterset der [HTML Canvas API](/de/docs/Web/API/Canvas_API); die Version, die Houdini zur Verfügung steht (genannt `PaintRenderingContext2D`), ist ein weiterer Unterset, der die meisten der in der vollständigen Canvas-API verfügbaren Funktionen enthält, mit der [Ausnahme](https://drafts.css-houdini.org/css-paint-api-1/#2d-rendering-context) der `CanvasImageData`, `CanvasUserInterface`, `CanvasText` und `CanvasTextDrawingStyles` APIs.
+Eine `paint()`-Funktion kann drei Argumente annehmen. Hier haben wir ein Argument bereitgestellt: den Rendering-Kontext (wir werden später mehr darauf eingehen), oft als `ctx` bezeichnet. Der 2D-Rendering-Kontext ist ein Unterbereich der [HTML Canvas API](/de/docs/Web/API/Canvas_API); die Version, die Houdini zur Verfügung steht (genannt `PaintRenderingContext2D`), ist ein weiterer Unterbereich, der die meisten Funktionen der vollständigen Canvas API mit der [Ausnahme](https://drafts.css-houdini.org/css-paint-api-1/#2d-rendering-context) der `CanvasImageData`, `CanvasUserInterface`, `CanvasText` und `CanvasTextDrawingStyles` APIs enthält.
 
-Wir definieren die [`fillStyle`](/de/docs/Web/API/CanvasRenderingContext2D/fillStyle) als `hsl(55 90% 60% / 100%)`, was ein Gelbton ist, und rufen dann `fillRect()` auf, um ein Rechteck dieser Farbe zu erstellen. Die Parameter von [`fillRect()`](/de/docs/Web/API/CanvasRenderingContext2D/fillRect) sind in der Reihenfolge Ursprung der x-Achse, Ursprung der y-Achse, Breite und Höhe. `fillRect(0, 15, 200, 20)` führt zur Erstellung eines Rechtecks, das 200 Einheiten breit und 20 Einheiten hoch ist, das 0 Einheiten vom linken Rand und 15 Einheiten vom oberen Rand des Inhaltsfeldes positioniert ist.
+Wir definieren den [`fillStyle`](/de/docs/Web/API/CanvasRenderingContext2D/fillStyle) als `hsl(55 90% 60% / 100%)`, was ein Gelbton ist, und rufen dann `fillRect()` auf, um ein Rechteck dieser Farbe zu erstellen. Die Parameter von [`fillRect()`](/de/docs/Web/API/CanvasRenderingContext2D/fillRect) sind, in Reihenfolge, x-Achsen-Ursprung, y-Achsen-Ursprung, Breite und Höhe. `fillRect(0, 15, 200, 20)` führt zur Erstellung eines Rechtecks, das 200 Einheiten breit und 20 Einheiten hoch ist, 0 Einheiten vom linken und 15 Einheiten vom oberen Rand des Inhaltskastens entfernt.
 
-Wir können die CSS-Eigenschaften [`background-size`](/de/docs/Web/CSS/background-size) und [`background-position`](/de/docs/Web/CSS/background-position) verwenden, um dieses Hintergrundbild in der Größe zu ändern oder zu verschieben, aber dies ist die Standardgröße und Platzierung des gelben Kästchens, das wir in unserem Paint-Worklet erstellt haben.
+Wir können die CSS-Eigenschaften {{cssxref("background-size")}} und {{cssxref("background-position")}} verwenden, um dieses Hintergrundbild neu zu skalieren oder zu verschieben, aber dies ist die Standardgröße und -platzierung des gelben Kastens, den wir in unserem Paint Worklet erstellt haben.
 
-Wir haben versucht, das Beispiel einfach zu halten. Für weitere Optionen schauen Sie in die [Canvas-Dokumentation](/de/docs/Web/HTML/Element/canvas). Wir fügen später in diesem Tutorial noch ein wenig Komplexität hinzu.
+Wir haben versucht, das Beispiel einfach zu halten. Für mehr Optionen sehen Sie sich die Dokumentation von {{HTMLElement("canvas")}} an. Wir fügen später in diesem Tutorial ein wenig Komplexität hinzu.
 
 ## Registrierung des Worklets
 
-Um das Paint-Worklet zu verwenden, müssen wir es mit [`addModule()`](/de/docs/Web/API/Worklet/addModule) registrieren und in unser CSS einfügen, wobei sichergestellt wird, dass der CSS-Selektor einem DOM-Knoten in unserem HTML entspricht.
+Um das Paint Worklet zu verwenden, müssen wir es mit [`addModule()`](/de/docs/Web/API/Worklet/addModule) registrieren und in unser CSS einfügen, wobei sichergestellt wird, dass der CSS-Selektor mit einem DOM-Knoten in unserem HTML übereinstimmt.
 
-Die Einrichtung und Gestaltung unseres Paint-Worklets fand im oben gezeigten externen Skript statt. Wir müssen dieses [Worklet](/de/docs/Web/API/Worklet) von unserem Hauptskript registrieren.
+Das Setup und Design unseres Paint Worklets fand im oben gezeigten externen Skript statt. Wir müssen dieses [`worklet`](/de/docs/Web/API/Worklet) aus unserem Hauptskript registrieren.
 
 ```js
 CSS.paintWorklet.addModule("nameOfPaintWorkletFile.js");
 ```
 
-Dies kann mit der `addModule()`-Methode des Paint-Worklets in einem `<script>` innerhalb des Haupt-HTMLs oder in einer externen JavaScript-Datei geschehen, die vom Dokument verlinkt ist.
+Dies kann mithilfe der `addModule()`-Methode des Paint Worklets in einem `<script>` innerhalb des Haupt-HTML oder in einer vom Dokument verlinkten externen JavaScript-Datei erfolgen.
 
-## Verwendung des Paint-Worklets
+## Verwendung des Paint Worklets
 
-In unserem Beispiel ist das Paint-Worklet zusammen mit der Haupt-Skriptdatei gespeichert. Um es zu verwenden, registrieren wir es zunächst:
+In unserem Beispiel wird das Paint Worklet neben der Hauptskriptdatei gespeichert. Um es zu nutzen, registrieren wir es zunächst:
 
 ```js
 CSS.paintWorklet.addModule("header-highlight.js");
 ```
 
-### Referenzieren des Paint-Worklets in CSS
+### Referenzieren des Paint Worklets in CSS
 
-Sobald wir ein registriertes Paint-Worklet haben, können wir es in CSS verwenden. Verwenden Sie die CSS-Funktion `paint()` wie bei jedem anderen `<image>`-Typ, wobei Sie denselben String-Identifier verwenden, den wir in der `registerPaint()`-Funktion des Paint-Worklets verwendet haben.
+Sobald wir ein registriertes Paint Worklet haben, können wir es in CSS verwenden. Verwenden Sie die CSS-`paint()`-Funktion wie jede andere `<image>` Type, mit dem gleichen String-Identifikator, den wir in der `registerPaint()`-Funktion des Paint Worklets verwendet haben.
 
 ```css
 .fancy {
@@ -92,31 +93,31 @@ Sobald wir ein registriertes Paint-Worklet haben, können wir es in CSS verwende
 }
 ```
 
-### Alles zusammenführen
+### Zusammensetzen
 
-Wir können dann die fancy-Klasse jedem Element auf der Seite hinzufügen, um ein gelbes Kästchen als Hintergrund hinzuzufügen:
+Wir können anschließend die fancy-Klasse zu jedem Element hinzufügen, um einen gelben Kasten als Hintergrund hinzuzufügen:
 
 ```html
 <h1 class="fancy">My Cool Header</h1>
 ```
 
-Das folgende Beispiel sieht in [Browsern, die die CSS Painting API unterstützen](/de/docs/Web/API/CSS/paintWorklet_static#browser_compatibility), wie das Bild oben aus.
+Das folgende Beispiel wird in [Browsern, die die CSS Painting API unterstützen](/de/docs/Web/API/CSS/paintWorklet_static#browser_compatibility), so aussehen wie das Bild oben.
 
 {{EmbedGHLiveSample("dom-examples/css-painting/half-highlight-fixed-size/", 120, 120)}}
 
-Während Sie das Skript des Worklets nicht bearbeiten können, können Sie die `background-size` und `background-position` ändern, um die Größe und Position des Hintergrundbildes anzupassen.
+Auch wenn Sie nicht mit dem Skript des Worklets spielen können, können Sie `background-size` und `background-position` ändern, um die Größe und Position des Hintergrundbildes zu ändern.
 
 ## PaintSize
 
-Im obigen Beispiel haben wir ein 20x200 Einheit großes Kästchen erstellt, das 15 Einheiten vom oberen Rand des Elements gemalt wird, unabhängig von der Größe des Elements. Wenn der Text klein ist, sieht das gelbe Kästchen wie eine riesige Unterstreichung aus. Wenn der Text riesig ist, könnte das Kästchen wie ein Balken über den ersten drei Buchstaben aussehen. Es wäre besser, wenn das Hintergrundbild relativ zur Größe des Elements wäre – wir können die `paintSize`-Eigenschaft des Elements verwenden, um sicherzustellen, dass das Hintergrundbild proportional zur Größe des Boxmodells des Elements ist.
+Im obigen Beispiel haben wir ein 20x200-Einheiten-Rechteck erstellt, das 15 Einheiten vom oberen Rand des Elements gefüllt ist, wobei es unabhängig von der Größe des Elements gleich bleibt. Wenn der Text klein ist, sieht der gelbe Kasten wie ein riesiges Unterstrich aus. Wenn der Text groß ist, kann der Kasten wie ein Balken über den ersten drei Buchstaben aussehen. Es wäre besser, wenn das Hintergrundbild relativ zur Größe des Elements wäre — wir können die `paintSize`-Eigenschaft des Elements verwenden, um sicherzustellen, dass das Hintergrundbild proportional zur Größe des Boxmodells des Elements ist.
 
 ![Der Hintergrund ist 50 % der Höhe und 60 % der Breite des Elements](mycoolheadersized.png)
 
-Im obigen Bild ist der Hintergrund proportional zur Größe des Elements. Das dritte Beispiel hat `width: 50%`; auf das Blockelement gesetzt, wodurch das Element schmaler wird und dadurch das Hintergrundbild schmaler wird.
+Im obigen Bild ist der Hintergrund proportional zur Größe des Elements. Das 3. Beispiel hat `width: 50%`; auf dem Block-Level-Element gesetzt, wodurch das Element und damit das Hintergrundbild schmaler wird.
 
-### Das Paint-Worklet
+### Das Paint Worklet
 
-Der Code dafür sieht so aus:
+Der Code, um das zu tun, sieht folgendermaßen aus:
 
 ```js
 registerPaint(
@@ -127,9 +128,9 @@ registerPaint(
     }
 
     /*
-    ctx is the 2D drawing context
-    size is the paintSize, the dimensions (height and width) of the box being painted
-  */
+     * ctx is the 2D drawing context
+     * size is the paintSize, the dimensions (height and width) of the box being painted
+     */
     paint(ctx, size) {
       ctx.fillStyle = "hsl(55 90% 60% / 100%)";
       ctx.fillRect(0, size.height / 3, size.width * 0.4, size.height * 0.6);
@@ -138,16 +139,16 @@ registerPaint(
 );
 ```
 
-Dieses Codebeispiel weist zwei Unterschiede zu unserem ersten Beispiel auf:
+Dieses Codebeispiel hat zwei Unterschiede zu unserem ersten Beispiel:
 
-1. Wir haben ein zweites Argument eingefügt, das die Paint-Größe ist.
-2. Wir haben die Abmessungen und die Positionierung unseres Rechtecks so geändert, dass sie relativ zur Größe des Element-Boxs sind, anstatt absolute Werte zu verwenden.
+1. Wir haben ein zweites Argument hinzugefügt, nämlich die Paint-Größe.
+2. Wir haben die Dimensionen und die Positionierung unseres Rechtecks geändert, sodass diese relativ zur Größe des Elementboxmodells und nicht über absolute Werte sind.
 
-Wir können den zweiten Parameter an die `paint()`-Funktion übergeben, um Zugriff auf die Breite und die Höhe des Elements zu erhalten, über die `.width` und `.height`-Eigenschaften.
+Wir können den zweiten Parameter in die `paint()`-Funktion übergeben, um Zugriff auf die Breite und Höhe des Elements über die `.width`- und `.height`-Eigenschaften zu erhalten.
 
 Unser Header hat jetzt ein Highlight, das sich entsprechend seiner Größe ändert.
 
-### Verwendung des Paint-Worklets
+### Verwendung des Paint Worklets
 
 #### HTML
 
@@ -159,7 +160,7 @@ Unser Header hat jetzt ein Highlight, das sich entsprechend seiner Größe ände
 
 #### CSS
 
-Während Sie das Skript des Worklets nicht bearbeiten können, können Sie die `font-size` und `width` des Elements ändern, um die Größe des Hintergrundbildes anzupassen.
+Auch wenn Sie nicht mit dem Skript des Worklets experimentieren können, können Sie die `font-size` und `width` des Elements ändern, um die Größe des Hintergrundbildes zu beeinflussen.
 
 ```css
 .fancy {
@@ -178,13 +179,13 @@ CSS.paintWorklet.addModule("header-highlight.js");
 
 #### Ergebnis
 
-In [Browsern, die die CSS Paint API unterstützen](/de/docs/Web/API/CSS/paintWorklet_static#browser_compatibility), sollen die Elemente im folgenden Beispiel gelbe Hintergründe proportional zu ihrer Schriftgröße erhalten.
+In [Browsern, die die CSS Paint API unterstützen](/de/docs/Web/API/CSS/paintWorklet_static#browser_compatibility), sollten die Elemente im folgenden Beispiel gelbe Hintergründe proportional zu ihrer Schriftgröße erhalten.
 
 {{EmbedGHLiveSample("dom-examples/css-painting/half-highlight-paintsize", 200, 200)}}
 
 ## Benutzerdefinierte Eigenschaften
 
-Zusätzlich zum Zugriff auf die Größe des Elements kann das Worklet auch auf CSS-benutzerdefinierte Eigenschaften und reguläre CSS-Eigenschaften zugreifen.
+Zusätzlich zum Zugriff auf die Größe des Elements kann das Worklet auch Zugriff auf CSS-Benutzereigenschaften und reguläre CSS-Eigenschaften haben.
 
 ```js
 registerPaint(
@@ -207,17 +208,17 @@ registerPaint(
 );
 ```
 
-Die drei Parameter der `paint()`-Funktion umfassen den Zeichnungskontext, die Paint-Größe und die Eigenschaften. Um auf Eigenschaften zugreifen zu können, fügen wir die statische Methode `inputProperties()` hinzu, die einen Live-Zugriff auf CSS-Eigenschaften bietet, einschließlich regulärer Eigenschaften und [benutzerdefinierter Eigenschaften](/de/docs/Web/CSS/CSS_cascading_variables), und ein {{jsxref("Array", "Array")}} von Eigenschaftsname zurückgibt. Wir werden einen Blick auf `inputArguments` im letzten Abschnitt werfen.
+Die drei Parameter der `paint()`-Funktion beinhalten den Zeichnungs-Kontext, die Paint-Größe und die Eigenschaften. Um auf Eigenschaften zugreifen zu können, nutzen wir die statische `inputProperties()`-Methode, die einen Live-Zugriff auf CSS-Eigenschaften bietet, inklusive regulärer Eigenschaften und [benutzerdefinierter Eigenschaften](/de/docs/Web/CSS/CSS_cascading_variables), und gibt ein {{jsxref("Array", "Array", "", 1)}} von Eigenschaften-Namen zurück. Wir werfen einen Blick auf [`inputArguments`](/de/docs/Web/API/CSS_Painting_API/Guide#passing_parameters) im letzten Abschnitt.
 
-Erstellen wir eine Liste von Elementen mit einem Hintergrundbild, die sich zwischen drei verschiedenen Farben und drei Breiten dreht.
+Lassen Sie uns eine Liste von Elementen erstellen mit einem Hintergrundbild, das zwischen drei verschiedenen Farben und drei Breiten wechselt.
 
-![Die Breite und die Farbe des Hintergrundbilds ändern sich basierend auf den benutzerdefinierten Eigenschaften](boxbg.png)
+![Die Breite und Farbe des Hintergrundbildes ändert sich basierend auf den benutzerdefinierten Eigenschaften](boxbg.png)
 
 Um dies zu erreichen, definieren wir zwei benutzerdefinierte CSS-Eigenschaften, `--boxColor` und `--widthSubtractor`.
 
-### Das Paint-Worklet
+### Das Paint Worklet
 
-In unserem Worklet können wir auf diese benutzerdefinierten Eigenschaften verweisen.
+In unserem Worklet können wir auf diese benutzerdefinierten Eigenschaften Bezug nehmen.
 
 ```js
 registerPaint(
@@ -228,20 +229,19 @@ registerPaint(
     }
 
     /*
-     use this function to retrieve any custom properties (or regular properties, such as 'height')
-     defined for the element, return them in the specified array
-  */
+     * use this function to retrieve any custom properties (or regular properties, such as 'height')
+     * defined for the element, return them in the specified array
+     */
     static get inputProperties() {
       return ["--boxColor", "--widthSubtractor"];
     }
 
     paint(ctx, size, props) {
       /*
-       ctx -> drawing context
-       size -> paintSize: width and height
-       props -> properties: get() method
-    */
-
+       * ctx -> drawing context
+       * size -> paintSize: width and height
+       * props -> properties: get() method
+       */
       ctx.fillStyle = props.get("--boxColor");
       ctx.fillRect(
         0,
@@ -254,9 +254,9 @@ registerPaint(
 );
 ```
 
-Wir haben die Methode `inputProperties()` in der `registerPaint()`-Klasse verwendet, um die Werte von zwei benutzerdefinierten Eigenschaften zu erhalten, die auf einem Element gesetzt sind, auf das `boxbg` angewendet wird, und sie dann innerhalb unserer `paint()`-Funktion verwendet. Die Methode `inputProperties()` kann alle Eigenschaften zurückgeben, die das Element beeinflussen, nicht nur benutzerdefinierte Eigenschaften.
+Wir haben die `inputProperties()`-Methode in der `registerPaint()`-Klasse verwendet, um die Werte von zwei benutzerdefinierten Eigenschaften abzurufen, die auf ein Element angewendet werden, das `boxbg` hat und diese dann innerhalb unserer `paint()`-Funktion verwendet. Die `inputProperties()`-Methode kann alle Eigenschaften zurückgeben, die das Element beeinflussen, und nicht nur benutzerdefinierte Eigenschaften.
 
-### Verwendung des Paint-Worklets
+### Nutzung des Paint Worklets
 
 #### HTML
 
@@ -314,17 +314,17 @@ CSS.paintWorklet.addModule("boxbg.js");
 
 #### Ergebnis
 
-Während Sie das Skript des Worklets nicht bearbeiten können, können Sie die Werte der benutzerdefinierten Eigenschaften in DevTools ändern, um die Farben und die Breite des Hintergrundbildes anzupassen.
+Auch wenn Sie nicht mit dem Skript des Worklets spielen können, können Sie die Werte der benutzerdefinierten Eigenschaften in den DevTools ändern, um die Farben und die Breite des Hintergrundbildes anzupassen.
 
 {{EmbedGHLiveSample("dom-examples/css-painting/custom-properties/", '100%', 400)}}
 
 ## Hinzufügen von Komplexität
 
-Die obigen Beispiele erscheinen vielleicht nicht sehr aufregend, da Sie sie auf verschiedene Weise mit bestehenden CSS-Eigenschaften nachbilden könnten, z. B. durch Positionierung einiger dekorativer [generierter Inhalte](/de/docs/Learn_web_development/Howto/Solve_CSS_problems/Generated_content) mit `::before`, oder durch Einfügen von `background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat;`. Was die CSS Painting API so interessant und leistungsstark macht, ist, dass Sie komplexe Bilder erstellen können, die automatisch Größenänderungen übernehmen, indem Sie Variablen übergeben.
+Die obigen Beispiele mögen nicht besonders spannend erscheinen, da Sie sie auf verschiedene Weisen mit bestehenden CSS-Eigenschaften nachbilden könnten, z. B. durch Positionierung eines dekorativen [generierten Inhalts](/de/docs/Learn_web_development/Howto/Solve_CSS_problems/Generated_content) mit `::before`, oder indem Sie `background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat;` einfügen. Was die CSS Painting API so interessant und leistungsfähig macht, ist, dass Sie komplexe Bilder erstellen können, die Variablen nutzen und sich automatisch anpassen.
 
-Sehen wir uns ein komplexeres Malbeispiel an.
+Werfen wir einen Blick auf ein komplexeres Mal-Beispiel.
 
-### Das Paint-Worklet
+### Das Paint Worklet
 
 ```js
 registerPaint(
@@ -378,9 +378,9 @@ registerPaint(
 );
 ```
 
-### Verwendung des Paint-Worklets
+### Verwendung des Paint Worklets
 
-Wir können dann ein wenig HTML erstellen, das dieses Bild als Hintergründe akzeptiert:
+Wir können dann ein kleines HTML erstellen, das dieses Bild als Hintergrund akzeptiert:
 
 ```html
 <h1 class="fancy">Largest Header</h1>
@@ -411,22 +411,22 @@ Und wir registrieren unser Worklet
 CSS.paintWorklet.addModule("header-highlight.js");
 ```
 
-Das Ergebnis sieht so aus:
+Das Ergebnis sieht folgendermaßen aus:
 
 {{EmbedGHLiveSample("dom-examples/css-painting/fancy-header-highlight/", 200, 200)}}
 
-Während Sie das Worklet selbst nicht bearbeiten können, können Sie mit dem CSS und HTML herumspielen. Versuchen Sie vielleicht [`float`](/de/docs/Web/CSS/float) und [`clear`](/de/docs/Web/CSS/clear) bei den Headers?
+Auch wenn Sie das Worklet selbst nicht bearbeiten können, können Sie mit dem CSS und HTML herumspielen. Versuchen Sie vielleicht {{cssxref("scale")}} und {{cssxref("rotate")}} auf den Headers?
 
-Sie könnten versuchen, die obigen Hintergrundbilder ohne die CSS Paint API zu erstellen. Es ist machbar, aber Sie müssten für jede Farbe, die Sie erstellen möchten, einen anderen, ziemlich komplexen Linearen Farbverlauf deklarieren. Mit der CSS Paint API kann ein Worklet wiederverwendet werden, wobei in diesem Fall unterschiedliche Farben übergeben werden.
+Sie könnten auch versuchen, die obigen Hintergrundbilder ohne die CSS Paint API zu erstellen. Es ist möglich, aber Sie müssten für jede Farbe, die Sie erstellen möchten, einen anderen, ziemlich komplexen linearen Verlauf angeben. Mit der CSS Paint API kann ein Worklet wiederverwendet werden, mit in diesem Fall verschiedenen übergebenen Farben.
 
 ## Übergabe von Parametern
 
 > [!NOTE]
-> Das folgende Beispiel erfordert das Aktivieren der "Experimentelle Webplattform-Features"-Flag in Chrome oder Edge, indem Sie `about://flags` besuchen.
+> Das folgende Beispiel erfordert, dass das Experimentelle Webplattform-Feature-Flag in Chrome oder Edge aktiviert ist, indem Sie `about://flags` besuchen.
 
 Mit der CSS Paint API haben wir nicht nur Zugriff auf benutzerdefinierte Eigenschaften und reguläre Eigenschaften, sondern wir können auch benutzerdefinierte Argumente an die `paint()`-Funktion übergeben.
 
-Wir können diese zusätzlichen Argumente übergeben, wenn wir die Funktion im CSS aufrufen. Angenommen, wir möchten manchmal unseren Hintergrund umranden anstatt ihn auszufüllen – lassen Sie uns ein zusätzliches Argument für diesen Fall übergeben.
+Wir können diese zusätzlichen Argumente angeben, wenn wir die Funktion im CSS aufrufen. Angenommen, wir möchten unseren Hintergrund statt zu füllen manchmal umranden — lassen Sie uns ein extra Argument für diesen Fall übergeben.
 
 ```css
 li {
@@ -434,7 +434,7 @@ li {
 }
 ```
 
-Nun können wir in der `registerPaint()`-Klasse die Methode `inputArguments()` verwenden, um auf das benutzerdefinierte Argument zuzugreifen, das wir unserer `paint()`-Funktion hinzugefügt haben.
+Nun können wir die Methode `inputArguments()` in der `registerPaint()`-Klasse verwenden, um auf das benutzerdefinierte Argument zuzugreifen, das wir unserer `paint()`-Funktion hinzugefügt haben.
 
 ```js
 static get inputArguments() { return ['*']; }
@@ -457,9 +457,9 @@ paint(ctx, size, props, args) {
 }
 ```
 
-Wir können auch angeben, dass wir einen bestimmten Argumenttyp wünschen.
+Wir können auch angeben, dass wir einen bestimmten Argumenttyp wollen.
 
-Angenommen, wir fügen ein zweites Argument hinzu, wie viele Pixel die Umrandung breit sein soll:
+Angenommen, wir fügen ein zweites Argument hinzu, um festzulegen, wie viele Pixel die Umrandung breit sein soll:
 
 ```css
 li {
@@ -467,17 +467,17 @@ li {
 }
 ```
 
-Wenn wir unsere Liste der Argumentwerte abrufen, können wir speziell eine `<length>` Einheit anfordern.
+Wenn wir unsere Liste mit Argumentwerten abrufen, können wir spezifisch nach einer `<length>`-Einheit fragen.
 
 ```js
 static get inputArguments() { return ['*', '<length>']; }
 ```
 
-In diesem Fall haben wir speziell das `<length>` Attribut angefordert. Das erste Element im zurückgegebenen Array wird ein [`CSSUnparsedValue`](/de/docs/Web/API/CSSUnparsedValue) sein. Das zweite wird ein [`CSSStyleValue`](/de/docs/Web/API/CSSStyleValue) sein.
+In diesem Fall haben wir spezifisch nach dem `<length>`-Attribut gefragt. Das erste Element im zurückgegebenen Array wird ein [`CSSUnparsedValue`](/de/docs/Web/API/CSSUnparsedValue) sein. Das zweite wird ein [`CSSStyleValue`](/de/docs/Web/API/CSSStyleValue) sein.
 
-Wenn das benutzerdefinierte Argument ein CSS-Wert ist, zum Beispiel eine Einheit, können wir die Typed OM CSSStyleValue-Klasse (und Unterklassen) aufrufen, indem wir das Werttyp-Schlüsselwort verwenden, wenn wir es in der `registerPaint()`-Funktion abrufen.
+Wenn das benutzerdefinierte Argument ein CSS-Wert ist, zum Beispiel eine Einheit, können wir die Typisierte OM CSSStyleValue-Klasse (und Unterklassen) durch das Verwenden des Schlüsselsworts des Wertetyps aufrufen, wenn wir es in der `registerPaint()`-Funktion abrufen.
 
-Jetzt können wir auf die Eigenschaften `type` und `value` zugreifen, was bedeutet, dass wir die Anzahl der Pixel und einen Numerischen Typ direkt aus der Box abrufen können. (Zugegeben, `ctx.lineWidth` nimmt einen float als Wert entgegen und nicht einen Längeneinheiten-Wert, aber der Beispiels halber...)
+Jetzt können wir auf die Typ- und Werteeigenschaften zugreifen, was bedeutet, dass wir die Anzahl der Pixel und einen Zahlentyp direkt zur Verfügung haben. (Zugegeben, `ctx.lineWidth` nimmt einen Gleitkommawert anstatt eines Wertes mit Längeneinheiten, aber zum Zwecke des Beispiels…)
 
 ```js
 paint(ctx, size, props, args) {
@@ -494,15 +494,15 @@ paint(ctx, size, props, args) {
 }
 ```
 
-Es ist erwähnenswert, den Unterschied zwischen der Verwendung von benutzerdefinierten Eigenschaften zur Steuerung verschiedener Teile dieses Worklets und den hier festgelegten Argumenten zu beachten. Benutzerdefinierte Eigenschaften (und in der Tat alle Eigenschaften der Stil-Landkarte) sind global – sie können auch andernorts in unserem CSS (und JS) verwendet werden.
+Es lohnt sich, den Unterschied zwischen der Verwendung von benutzerdefinierten Eigenschaften zur Steuerung verschiedener Teile dieses Worklets und den hier aufgeführten Argumenten zu beachten. Benutzerdefinierte Eigenschaften (und tatsächlich alle Eigenschaften auf der Style-Map) sind global — sie können anderswo innerhalb unseres CSS (und JS) verwendet werden.
 
-Sie können zum Beispiel einen `--mainColor` haben, der nützlich sein wird, um die Farbe innerhalb einer `paint()`-Funktion zu setzen, aber auch an anderer Stelle in Ihrem CSS verwendet werden kann. Wenn Sie ihn speziell für Paint ändern möchten, könnte es sich als schwierig erweisen. Hier kommen benutzerdefinierte Argumente ins Spiel. Eine andere Möglichkeit, darüber nachzudenken, ist, dass Argumente festgelegt sind, um zu steuern, was Sie tatsächlich zeichnen, während Eigenschaften festgelegt sind, um das Styling zu kontrollieren.
+Sie könnten zum Beispiel eine `--mainColor` haben, die nützlich wäre, um die Farbe innerhalb einer `paint()`-Funktion festzulegen, aber auch anderswo in Ihrem CSS verwendet werden kann. Wenn Sie es nur für Paint ändern wollten, könnte dies sich als schwierig erweisen. Hier kommt die Funktion des benutzerdefinierten Arguments ins Spiel. Ein anderer Weg, darüber nachzudenken, ist, dass Argumente gesetzt sind, um das, was Sie tatsächlich zeichnen, zu steuern, während Eigenschaften gesetzt sind, um das Styling zu steuern.
 
-![Die Listenelemente haben ein Hintergrundbild, das entweder pink, lila oder grün ist, mit unterschiedlicher Strichstärke, und das grüne wird gefüllt.](hollowfilled.png)
+![Die Listenelemente haben ein Hintergrundbild, das entweder pink, lila oder grün ist, mit unterschiedlichen Linienbreiten, und das grüne ist gefüllt.](hollowfilled.png)
 
-Jetzt beginnen wir wirklich, die Vorteile dieser API zu erkennen: Wenn wir eine Vielzahl von Zeichenparametern durch unser CSS sowohl über benutzerdefinierte Eigenschaften als auch über zusätzliche `paint()`-Funktionsargumente steuern können, können wir wirklich wiederverwendbare und hochgradig kontrollierbare Stylingfunktionen erstellen.
+Jetzt können wir wirklich anfangen, die Vorteile dieser API zu sehen, wenn wir eine Vielzahl von Zeichnungsparametern durch unser CSS über sowohl benutzerdefinierte Eigenschaften als auch zusätzliche `paint()`-Funktionsargumente steuern können, dann können wir anfangen, wiederverwendbare und hochkontrollierbare Stilfunktionen zu erstellen.
 
-### Das Paint-Worklet
+### Das Paint Worklet
 
 ```js
 registerPaint(
@@ -579,9 +579,9 @@ registerPaint(
 );
 ```
 
-### Verwendung des Paint-Worklets
+### Verwendung des Paint Worklets
 
-Wir können verschiedene Farben, Strichstärken festlegen und wählen, ob das Hintergrundbild ausgefüllt oder hohl sein soll:
+Wir können verschiedene Farben, Linienbreiten festlegen und auswählen, ob das Hintergrundbild gefüllt oder hohl sein soll:
 
 ```css
 li {
diff --git a/files/de/web/api/css_painting_api/index.md b/files/de/web/api/css_painting_api/index.md
index 54e782205..bbb2f8fb3 100644
--- a/files/de/web/api/css_painting_api/index.md
+++ b/files/de/web/api/css_painting_api/index.md
@@ -2,16 +2,16 @@
 title: CSS Painting API
 slug: Web/API/CSS_Painting_API
 l10n:
-  sourceCommit: 8a4f257358730920c6df40433171ff39b4b1fc21
+  sourceCommit: bad620560c435cae3d3436b9b01ff654680af9a3
 ---
 
 {{DefaultAPISidebar("CSS Painting API")}}{{SeeCompatTable}}
 
-Die CSS Painting API — ein Teil der [CSS Houdini](/de/docs/Web/API/Houdini_APIs) APIs — ermöglicht es Entwicklern, JavaScript-Funktionen zu schreiben, die direkt in den Hintergrund, den Rahmen oder den Inhalt eines Elements zeichnen können.
+Die CSS Painting API — Teil des [CSS Houdini](/de/docs/Web/API/Houdini_APIs) Gesamtpakets von APIs — ermöglicht es Entwicklern, JavaScript-Funktionen zu schreiben, die direkt in den Hintergrund, Rahmen oder Inhalt eines Elements zeichnen können.
 
-## Konzepte und Verwendung
+## Konzepte und Nutzung
 
-Im Wesentlichen enthält die CSS Painting API Funktionen, die es Entwicklern ermöglichen, benutzerdefinierte Werte für {{cssxref('image/paint', 'paint()')}}, eine CSS [`<image>`](/de/docs/Web/CSS/image) Funktion, zu erstellen. Diese Werte können dann auf Eigenschaften wie {{cssxref("background-image")}} angewendet werden, um komplexe benutzerdefinierte Hintergründe auf einem Element festzulegen.
+Im Wesentlichen enthält die CSS Painting API Funktionen, die es Entwicklern erlauben, benutzerdefinierte Werte für {{cssxref('image/paint', 'paint()')}}, eine CSS {{cssxref('&lt;image&gt;')}} Funktion, zu erstellen. Diese Werte können Sie dann auf Eigenschaften wie {{cssxref('background-image')}} anwenden, um komplexe benutzerdefinierte Hintergründe auf ein Element anzuwenden.
 
 Zum Beispiel:
 
@@ -21,28 +21,28 @@ aside {
 }
 ```
 
-Die API definiert ein [`worklet`](/de/docs/Web/API/Worklet), das verwendet werden kann, um programmgesteuert ein Bild zu erzeugen, das auf Änderungen im berechneten Stil reagiert. Um mehr darüber zu erfahren, wie dies verwendet wird, konsultieren Sie [Verwenden der CSS Painting API](/de/docs/Web/API/CSS_Painting_API/Guide).
+Die API definiert ein [`worklet`](/de/docs/Web/API/Worklet), das verwendet werden kann, um programmgesteuert ein Bild zu erzeugen, das auf Änderungen des berechneten Stils reagiert. Um mehr darüber zu erfahren, wie dies verwendet wird, konsultieren Sie [Using the CSS Painting API](/de/docs/Web/API/CSS_Painting_API/Guide).
 
 ## Schnittstellen
 
 - [`PaintWorkletGlobalScope`](/de/docs/Web/API/PaintWorkletGlobalScope)
-  - : Der globale Ausführungskontext des Paint Worklets.
+  - : Der globale Ausführungskontext des Paint Worklet.
 - [`PaintRenderingContext2D`](/de/docs/Web/API/PaintRenderingContext2D)
-  - : Implementiert einen Teil der [`CanvasRenderingContext2D`](/de/docs/Web/API/CanvasRenderingContext2D) API. Es hat ein Ausgabebitmap, das die Größe des Objekts hat, auf das es zeichnet.
+  - : Der Rendering-Kontext für den Rendering-Kontext der CSS Painting API zum Zeichnen auf das Bitmap.
 - [`PaintSize`](/de/docs/Web/API/PaintSize)
-  - : Repräsentiert die Größe des Ausgabebitmaps, das der Autor zeichnen sollte.
+  - : Repräsentiert die Größe des Ausgabebitmaps, die der Autor zeichnen soll.
 
 ## Beispiele
 
-Das folgende Beispiel erstellt eine Liste von Elementen mit einem Hintergrundbild, das zwischen drei verschiedenen Farben und drei Breiten rotiert. In [einem unterstützenden Browser](#browser-kompatibilität) sehen Sie etwas wie das Bild unten.
+Das folgende Beispiel erstellt eine Liste von Elementen mit einem Hintergrundbild, das zwischen drei verschiedenen Farben und drei Breiten rotiert. In [einem unterstützenden Browser](#browser-kompatibilität) werden Sie etwas wie das untenstehende Bild sehen.
 
-![Die Breite und Farbe des Hintergrundbildes ändert sich basierend auf den benutzerdefinierten Eigenschaften](guide/boxbg.png)
+![Die Breite und Farbe des Hintergrundbildes ändern sich basierend auf den benutzerdefinierten Eigenschaften](guide/boxbg.png)
 
 Um dies zu erreichen, definieren wir zwei benutzerdefinierte CSS-Eigenschaften, `--boxColor` und `--widthSubtractor`.
 
 ### Das Paint Worklet
 
-Das Worklet ist eine externe JavaScript-Datei (in diesem Fall haben wir es `boxbg.js` genannt), die ein Paint-[`worklet`](/de/docs/Web/API/Worklet) definiert. Mit dem Worklet können wir auf die CSS-Eigenschaften (und benutzerdefinierte Eigenschaften) von Elementen zugreifen:
+Das Worklet ist eine externe JavaScript-Datei (in diesem Fall haben wir es `boxbg.js` genannt), die ein Paint [`worklet`](/de/docs/Web/API/Worklet) definiert. Mit dem Worklet können wir auf CSS-Eigenschaften (und benutzerdefinierte Eigenschaften) von Elementen zugreifen:
 
 ```js
 registerPaint(
@@ -78,9 +78,9 @@ registerPaint(
 );
 ```
 
-Wir haben die Methode `inputProperties()` in der `registerPaint()`-Klasse verwendet, um die Werte von zwei benutzerdefinierten Eigenschaften zu erhalten, die auf ein Element angewendet werden, das `boxbg` verwendet, und diese dann in unserer `paint()`-Funktion verwendet. Die Methode `inputProperties()` kann alle Eigenschaften zurückgeben, die das Element beeinflussen, nicht nur benutzerdefinierte Eigenschaften.
+Wir haben die Methode `inputProperties()` in der Klasse `registerPaint()` verwendet, um die Werte von zwei benutzerdefinierten Eigenschaften zu erhalten, die auf einem Element gesetzt sind, das `boxbg` angewendet hat, und diese dann innerhalb unserer `paint()`-Funktion verwendet. Die `inputProperties()`-Methode kann alle Eigenschaften zurückgeben, die das Element beeinflussen, nicht nur benutzerdefinierte Eigenschaften.
 
-### Verwendung des Paint Worklets
+### Verwendung des Paint Worklet
 
 #### HTML
 
@@ -126,7 +126,7 @@ li:nth-of-type(3n + 1) {
 
 #### JavaScript
 
-Das Setup und die Logik des Paint Worklets befinden sich im externen Skript. Um das Worklet zu registrieren, müssen wir [`addModule()`](/de/docs/Web/API/Worklet/addModule) von unserem Hauptskript aufrufen:
+Das Setup und die Logik des Paint Worklet befinden sich im externen Skript. Um das Worklet zu registrieren, müssen wir [`addModule()`](/de/docs/Web/API/Worklet/addModule) aus unserem Hauptskript aufrufen:
 
 ```js live-sample___example-boxbg
 CSS.paintWorklet.addModule(
@@ -134,7 +134,7 @@ CSS.paintWorklet.addModule(
 );
 ```
 
-In diesem Beispiel wird das Worklet unter `https://mdn.github.io/` gehostet, aber Ihr Worklet könnte eine relative Ressource sein wie folgt:
+In diesem Beispiel wird das Worklet bei `https://mdn.github.io/` gehostet, aber Ihr Worklet kann eine relative Ressource wie folgt sein:
 
 ```js
 CSS.paintWorklet.addModule("boxbg.js");
@@ -142,7 +142,7 @@ CSS.paintWorklet.addModule("boxbg.js");
 
 #### Ergebnis
 
-Obwohl Sie das Skript des Worklets nicht ändern können, können Sie die Werte der benutzerdefinierten Eigenschaften in den DevTools ändern, um die Farben und die Breite des Hintergrundbildes zu ändern.
+Obwohl Sie nicht mit dem Skript des Worklets spielen können, können Sie die Werte der benutzerdefinierten Eigenschaften in den DevTools ändern, um die Farben und die Breite des Hintergrundbildes zu ändern.
 
 {{EmbedLiveSample("example-boxbg", "", "300px")}}
 
@@ -156,6 +156,6 @@ Obwohl Sie das Skript des Worklets nicht ändern können, können Sie die Werte
 
 ## Siehe auch
 
-- [Verwenden der CSS Painting API](/de/docs/Web/API/CSS_Painting_API/Guide)
+- [Using the CSS Painting API](/de/docs/Web/API/CSS_Painting_API/Guide)
 - [CSS Typed Object Model API](/de/docs/Web/API/CSS_Typed_OM_API)
 - [Houdini APIs](/de/docs/Web/API/Houdini_APIs)
diff --git a/files/de/web/api/htmlimageelement/loading/index.md b/files/de/web/api/htmlimageelement/loading/index.md
index b06dbb2b9..0a6b098e7 100644
--- a/files/de/web/api/htmlimageelement/loading/index.md
+++ b/files/de/web/api/htmlimageelement/loading/index.md
@@ -3,59 +3,56 @@ title: "HTMLImageElement: loading-Eigenschaft"
 short-title: loading
 slug: Web/API/HTMLImageElement/loading
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 8bc1b82b5526140a0bd6cfc147b74bf74947a09d
 ---
 
 {{APIRef("HTML DOM")}}
 
-Die [`HTMLImageElement`](/de/docs/Web/API/HTMLImageElement)-Eigenschaft **`loading`** ist ein String, dessen Wert dem {{Glossary("user_agent", "User-Agent")}} einen Hinweis gibt, wie das Laden des Bildes, das sich derzeit außerhalb des visuellen Viewports des Fensters befindet, gehandhabt werden soll.
+Die [`HTMLImageElement`](/de/docs/Web/API/HTMLImageElement)-Eigenschaft **`loading`** ist ein String, dessen Wert einen Hinweis darauf gibt, wie der {{Glossary("user_agent", "User-Agent")}} das Laden des Bildes, das sich derzeit außerhalb des {{Glossary("visual_viewport", "visuellen Viewports")}} des Fensters befindet, behandeln soll.
 
-Dies hilft, das Laden der Inhalte eines Dokuments zu optimieren, indem das Laden des Bildes bis zu dem Zeitpunkt verschoben wird, an dem es voraussichtlich benötigt wird, anstatt es sofort während des anfänglichen Seitenladevorgangs zu laden.
+Dies hilft, das Laden der Inhalte des Dokuments zu optimieren, indem das Laden des Bildes hinausgeschoben wird, bis es wahrscheinlich benötigt wird, anstatt sofort beim initialen Seitenladen.
 
 ## Wert
 
-Ein String, der dem User-Agent einen Hinweis gibt, wie das Laden des Bildes am besten geplant werden kann, um die Leistung der Seite zu optimieren.
+Ein String, der dem User-Agent einen Hinweis gibt, wie das Laden des Bildes am besten geplant werden soll, um die Seitenleistung zu optimieren.
 Die möglichen Werte sind:
 
 - `eager`
-  - : Das Standardverhalten, `eager`, weist den Browser an, das Bild zu laden, sobald das `<img>`-Element verarbeitet wird.
+  - : Das Standardverhalten, `eager` weist den Browser an, das Bild zu laden, sobald das `<img>`-Element verarbeitet wird.
 - `lazy`
-  - : Weist den User-Agent an, das Laden des Bildes solange aufzuschieben, bis der Browser schätzt, dass es bald benötigt wird.
-    Zum Beispiel, wenn der Benutzer durch das Dokument scrollt, wird ein Wert von `lazy` bewirken, dass das Bild nur kurz bevor es im visuellen Viewport des Fensters erscheint, geladen wird.
+  - : Weist den User-Agent an, das Laden des Bildes zurückzustellen, bis der Browser schätzt, dass es bald benötigt wird.
+    Zum Beispiel, wenn der Benutzer durch das Dokument scrollt, bewirkt ein Wert von `lazy`, dass das Bild erst kurz vor seinem Erscheinen im {{Glossary("visual_viewport", "visuellen Viewport")}} geladen wird.
 
-## Verwendungshinweise
-
-> [!NOTE]
-> In Firefox muss das `loading`-Attribut vor dem `src`-Attribut definiert sein, sonst hat es keine Wirkung ([Firefox-Bug 1647077](https://bugzil.la/1647077)).
+## Nutzungshinweise
 
 ### JavaScript muss aktiviert sein
 
 Das Laden wird nur verzögert, wenn JavaScript aktiviert ist.
-Dies ist eine Anti-Tracking-Maßnahme, denn wenn ein User-Agent Lazy-Loading unterstützen würde, während Scripting deaktiviert ist, wäre es dennoch möglich, die ungefähre Scroll-Position eines Benutzers während einer Sitzung zu verfolgen, indem Bilder strategisch im Markup einer Seite platziert werden, sodass ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.
+Dies ist eine Maßnahme gegen Tracking, da es einer Website möglich wäre, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem strategisch Bilder im Markup einer Seite platziert werden, sodass ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.
 
-### Zeitpunkt des Ladeereignisses
+### Zeitpunkt des Lade-Events
 
-Das [`load`](/de/docs/Web/API/Window/load_event)-Ereignis wird ausgelöst, wenn das Dokument vollständig verarbeitet wurde.
-Wenn Bilder eifrig geladen werden (was der Standard ist), muss jedes Bild im Dokument abgerufen werden, bevor das `load`-Ereignis ausgelöst werden kann.
+Das [`load`](/de/docs/Web/API/Window/load_event)-Event wird ausgelöst, wenn das Dokument vollständig verarbeitet wurde.
+Wenn Bilder eifrig geladen werden (was der Standard ist), muss jedes Bild im Dokument abgerufen werden, bevor das `load`-Event ausgelöst werden kann.
 
-Durch Angabe des Wertes `lazy` für `loading` verhindern Sie, dass das Bild das `load`-Attribut um die Zeit verzögert, die zum Anfordern, Abrufen und Verarbeiten des Bildes benötigt wird.
+Durch das Festlegen des Wertes `lazy` für `loading` verhindern Sie, dass das Bild das `load`-Attribut um die Zeit verzögert, die benötigt wird, um das Bild anzufordern, abzurufen und zu verarbeiten.
 
-Bilder, deren `loading`-Attribut auf `lazy` gesetzt ist, die sich jedoch innerhalb des visuellen Viewports direkt nach dem anfänglichen Seitenladen befinden, werden geladen, sobald das Layout bekannt ist, aber deren Ladevorgänge verzögern das Auslösen des `load`-Ereignisses nicht.
-Mit anderen Worten laden diese Bilder nicht sofort beim Verarbeiten des `<img>`-Elements, sind jedoch immer noch Teil des anfänglichen Seitenladens.
-Sie beeinflussen einfach nicht den Zeitpunkt des `load`-Ereignisses.
+Bilder, deren `loading`-Attribut auf `lazy` gesetzt ist, die sich jedoch sofort nach dem initialen Laden der Seite im visuellen Viewport befinden, werden geladen, sobald das Layout bekannt ist, aber ihr Laden verzögert nicht die Auslösung des `load`-Events.
+Mit anderen Worten, diese Bilder werden nicht sofort beim Verarbeiten des `<img>`-Elements geladen, sind aber dennoch Teil des initialen Seitenladens.
+Sie beeinflussen lediglich nicht das Timing des `load`-Events.
 
-Das bedeutet, dass wenn `load` ausgelöst wird, es möglich ist, dass alle lazy-geladenen Bilder, die sich im visuellen Viewport befinden, noch nicht sichtbar sind.
+Das bedeutet, dass es möglich ist, wenn `load` ausgelöst wird, dass noch nicht alle lazy-geladenen Bilder, die sich im visuellen Viewport befinden, sichtbar sind.
 
-### Verhindern von Elementverschiebungen während des Lazy-Loadings von Bildern
+### Verhinderung von Elementverschiebungen während des Lazy-Ladens von Bildern
 
-Wenn ein Bild, dessen Laden durch das `loading`-Attribut mit dem Wert `lazy` verzögert wurde, schließlich geladen wird, bestimmt der Browser die endgültige Größe des {{HTMLElement("img")}}-Elements basierend auf dem Stil und der intrinsischen Größe des Bildes und überarbeitet das Dokument nach Bedarf, um die Position der Elemente basierend auf jeder Größenänderung zu aktualisieren, die am Element vorgenommen wird, um das Bild anzupassen.
+Wenn ein Bild, dessen Laden durch das `loading`-Attribut auf `lazy` verzögert wurde, schließlich geladen wird, bestimmt der Browser die endgültige Größe des {{HTMLElement("img")}}-Elements basierend auf dem Stil und der intrinsischen Größe des Bildes und überarbeitet das Dokument nach Bedarf, um die Positionen der Elemente basierend auf jeder Größenänderung anzupassen, die am Element vorgenommen wird, um das Bild anzupassen.
 
-Um diese Überarbeitung zu verhindern, sollten Sie die Größe der Bilddarstellung ausdrücklich mithilfe der Attribute [`width`](/de/docs/Web/HTML/Element/img#width) und [`height`](/de/docs/Web/HTML/Element/img#height) des Bildelements angeben.
-Indem Sie das intrinsische {{Glossary("aspect_ratio", "Seitenverhältnis")}} auf diese Weise festlegen, verhindern Sie, dass sich Elemente während des Ladens des Dokuments verschieben, was im besten Fall irritierend oder abschreckend sein kann und im schlimmsten Fall Benutzer dazu bringen kann, versehentlich das falsche Objekt anzuklicken, abhängig vom genauen Timing der verzögerten Ladevorgänge und Überarbeitungen.
+Um diesen Reflow zu verhindern, sollten Sie die Größe der Bildpräsentation ausdrücklich mit den Attributen [`width`](/de/docs/Web/HTML/Element/img#width) und [`height`](/de/docs/Web/HTML/Element/img#height) des Bildelements angeben.
+Indem Sie auf diese Weise das intrinsische {{Glossary("aspect_ratio", "Seitenverhältnis")}} festlegen, verhindern Sie, dass sich Elemente während des Ladens des Dokuments verschieben, was im besten Fall irritierend oder unattraktiv sein kann und im schlimmsten Fall dazu führen kann, dass Benutzer fälschlicherweise auf etwas klicken, abhängig vom genauen Timing der verzögerten Ladevorgänge und Reflows.
 
 ## Beispiele
 
-Die unten gezeigte Funktion `addImageToList()` fügt eine Fotominiaturansicht zu einer Liste von Elementen hinzu und verwendet Lazy-Loading, um das Laden des Bildes aus dem Netzwerk zu vermeiden, bis es tatsächlich benötigt wird.
+Die unten gezeigte Funktion `addImageToList()` fügt ein Foto-Thumbnail zu einer Liste von Elementen hinzu und verwendet Lazy-Loading, um zu vermeiden, dass das Bild aus dem Netzwerk geladen wird, bis es tatsächlich benötigt wird.
 
 ```js
 function addImageToList(url) {
@@ -87,4 +84,4 @@ function addImageToList(url) {
 
 - Das {{HTMLElement("img")}}-Element
 - [Web-Performance](/de/docs/Learn_web_development/Extensions/Performance) im MDN-Lernbereich
-- [Lazy Loading](/de/docs/Web/Performance/Lazy_loading) im MDN-Webperformance-Leitfaden
+- [Lazy Loading](/de/docs/Web/Performance/Lazy_loading) im MDN-Web-Performance-Leitfaden
diff --git a/files/de/web/api/paintrenderingcontext2d/index.md b/files/de/web/api/paintrenderingcontext2d/index.md
new file mode 100644
index 000000000..68bce642a
--- /dev/null
+++ b/files/de/web/api/paintrenderingcontext2d/index.md
@@ -0,0 +1,186 @@
+---
+title: PaintRenderingContext2D
+slug: Web/API/PaintRenderingContext2D
+l10n:
+  sourceCommit: bad620560c435cae3d3436b9b01ff654680af9a3
+---
+
+{{APIRef("CSS Painting API")}}{{SeeCompatTable}}
+
+Das **`PaintRenderingContext2D`** Interface der [CSS Painting API](/de/docs/Web/API/CSS_Painting_API) ist der Rendering-Kontext der API zum Zeichnen auf das Bitmap. Es implementiert einen Teil der [`CanvasRenderingContext2D`](/de/docs/Web/API/CanvasRenderingContext2D) API, mit den folgenden Ausnahmen:
+
+- Es implementiert nicht die [`CanvasImageData` Pixelmanipulation](/de/docs/Web/API/CanvasRenderingContext2D#pixel_manipulation), [`CanvasUserInterface` Fokus](/de/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded), [`CanvasText` Textzeichnung](/de/docs/Web/API/CanvasRenderingContext2D) oder [`CanvasTextDrawingStyles` Textstil](/de/docs/Web/API/CanvasRenderingContext2D#text_styles) Schnittstellenmethoden.
+- Das Ausgabebitmap hat die Größe des Objekts, auf das es rendert.
+- Der Wert `currentColor`, wenn er als Farbe verwendet wird, wird als opakes Schwarz behandelt.
+
+Das Interface ist nur im [`PaintWorkletGlobalScope`](/de/docs/Web/API/PaintWorkletGlobalScope) verfügbar.
+
+## Instanzeigenschaften und Methoden
+
+_Das `PaintRenderingContext2D` implementiert einen Teil der [`CanvasRenderingContext2D`](/de/docs/Web/API/CanvasRenderingContext2D) API, wobei alle Eigenschaften und Methoden die gleiche Verwendung wie in `CanvasRenderingContext2D` haben._
+
+### Kontext
+
+- [`CanvasRenderingContext2D.isContextLost()`](/de/docs/Web/API/CanvasRenderingContext2D/isContextLost)
+  - : Gibt `true` zurück, wenn der Rendering-Kontext verloren gegangen ist.
+
+### Zustand
+
+- [`CanvasRenderingContext2D.save()`](/de/docs/Web/API/CanvasRenderingContext2D/save)
+  - : Speichert den aktuellen Zeichenstilzustand mithilfe eines Stacks, sodass Sie jede Änderung daran mit `restore()` rückgängig machen können.
+- [`CanvasRenderingContext2D.restore()`](/de/docs/Web/API/CanvasRenderingContext2D/restore)
+  - : Stellt den Zeichenstilzustand auf das letzte Element im 'Zustands-Stack' zurück, das von `save()` gespeichert wurde.
+- [`CanvasRenderingContext2D.reset()`](/de/docs/Web/API/CanvasRenderingContext2D/reset)
+  - : Setzt den aktuellen Zeichenstilzustand auf die Standardwerte zurück.
+
+### Transformationen
+
+- [`CanvasRenderingContext2D.getTransform()`](/de/docs/Web/API/CanvasRenderingContext2D/getTransform)
+  - : Ruft die aktuell angewendete Transformationsmatrix als [`DOMMatrix`](/de/docs/Web/API/DOMMatrix) ab.
+- [`CanvasRenderingContext2D.rotate()`](/de/docs/Web/API/CanvasRenderingContext2D/rotate)
+  - : Fügt der Transformationsmatrix eine Rotation hinzu. Das Winkelargument stellt einen im Uhrzeigersinn gemessenen Rotationswinkel dar und wird in Bogenmaß angegeben.
+- [`CanvasRenderingContext2D.scale()`](/de/docs/Web/API/CanvasRenderingContext2D/scale)
+  - : Fügt eine Skalierungstransformation zu den Canvas-Einheiten horizontal nach x und vertikal nach y hinzu.
+- [`CanvasRenderingContext2D.translate()`](/de/docs/Web/API/CanvasRenderingContext2D/translate)
+  - : Fügt eine Verschiebungstransformation hinzu, indem das Canvas und sein Ursprung horizontal nach x und vertikal nach y verschoben wird.
+- [`CanvasRenderingContext2D.transform()`](/de/docs/Web/API/CanvasRenderingContext2D/transform)
+  - : Multipliziert die aktuelle Transformationsmatrix mit der durch ihre Argumente beschriebenen Matrix.
+- [`CanvasRenderingContext2D.setTransform()`](/de/docs/Web/API/CanvasRenderingContext2D/setTransform)
+  - : Setzt die aktuelle Transformation auf die Einheitsmatrix zurück und ruft dann die `transform()`-Methode mit denselben Argumenten auf.
+- [`CanvasRenderingContext2D.resetTransform()`](/de/docs/Web/API/CanvasRenderingContext2D/resetTransform)
+  - : Setzt die aktuelle Transformation mit der Einheitsmatrix zurück.
+
+### Komposition
+
+- [`CanvasRenderingContext2D.globalAlpha`](/de/docs/Web/API/CanvasRenderingContext2D/globalAlpha)
+  - : Alphawert, der auf Formen und Bilder angewendet wird, bevor sie auf dem Canvas zusammengefügt werden.
+- [`CanvasRenderingContext2D.globalCompositeOperation`](/de/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)
+  - : Mit `globalAlpha` angewandt, legt fest, wie Formen und Bilder auf das vorhandene Bitmap gezeichnet werden.
+
+### Bildglättung
+
+- [`CanvasRenderingContext2D.imageSmoothingEnabled`](/de/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled)
+  - : Bildglättungsmodus; wenn deaktiviert, werden Bilder beim Skalieren nicht geglättet.
+- [`CanvasRenderingContext2D.imageSmoothingQuality`](/de/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality)
+  - : Ermöglicht es Ihnen, die Qualität der Bildglättung festzulegen.
+
+### Füll- und Linienstile
+
+- [`CanvasRenderingContext2D.fillStyle`](/de/docs/Web/API/CanvasRenderingContext2D/fillStyle)
+  - : Farbe oder Stil zum Füllen von Formen.
+- [`CanvasRenderingContext2D.strokeStyle`](/de/docs/Web/API/CanvasRenderingContext2D/strokeStyle)
+  - : Farbe oder Stil für die Linien um Formen.
+
+### Verläufe und Muster
+
+- [`CanvasRenderingContext2D.createConicGradient()`](/de/docs/Web/API/CanvasRenderingContext2D/createConicGradient)
+  - : Erstellt einen konischen Verlauf um einen durch Koordinaten benannten Punkt, der durch die Parameter dargestellt wird.
+- [`CanvasRenderingContext2D.createLinearGradient()`](/de/docs/Web/API/CanvasRenderingContext2D/createLinearGradient)
+  - : Erstellt einen linearen Verlauf entlang der Linie, die durch die Koordinaten dargestellt wird, die durch die Parameter gegeben sind.
+- [`CanvasRenderingContext2D.createRadialGradient()`](/de/docs/Web/API/CanvasRenderingContext2D/createRadialGradient)
+  - : Erstellt einen radialen Verlauf, der durch die Koordinaten der beiden durch die Parameter dargestellten Kreise bestimmt wird.
+- [`CanvasRenderingContext2D.createPattern()`](/de/docs/Web/API/CanvasRenderingContext2D/createPattern)
+  - : Erstellt ein [`CanvasPattern`](/de/docs/Web/API/CanvasPattern)-Muster des angegebenen Bildes, das in die durch das Wiederholungsargument angegebenen Richtungen wiederholt wird.
+
+### Schatten
+
+- [`CanvasRenderingContext2D.shadowBlur`](/de/docs/Web/API/CanvasRenderingContext2D/shadowBlur)
+  - : Gibt die Menge an Unschärfe als Zahl an.
+- [`CanvasRenderingContext2D.shadowColor`](/de/docs/Web/API/CanvasRenderingContext2D/shadowColor)
+  - : Gibt die Farbe des Schattens als CSS {{cssxref("&lt;color&gt;")}} an.
+- [`CanvasRenderingContext2D.shadowOffsetX`](/de/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX)
+  - : Gibt die horizontale Entfernung an, um die der Schatten versetzt wird, als Zahl.
+- [`CanvasRenderingContext2D.shadowOffsetY`](/de/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY)
+  - : Gibt die vertikale Entfernung an, um die der Schatten versetzt wird, als Zahl.
+
+### Rechtecke zeichnen
+
+- [`CanvasRenderingContext2D.clearRect()`](/de/docs/Web/API/CanvasRenderingContext2D/clearRect)
+  - : Löscht die Pixel im angegebenen Rechteck und setzt sie auf transparentes Schwarz.
+- [`CanvasRenderingContext2D.fillRect()`](/de/docs/Web/API/CanvasRenderingContext2D/fillRect)
+  - : Malt die Pixel des angegebenen Rechtecks und füllt es mit dem aktuellen Füllstil.
+- [`CanvasRenderingContext2D.strokeRect()`](/de/docs/Web/API/CanvasRenderingContext2D/strokeRect)
+  - : Malt die Umrandung des angegebenen Rechtecks mit dem aktuellen Linienstil.
+
+### Pfade zeichnen
+
+- [`CanvasRenderingContext2D.beginPath()`](/de/docs/Web/API/CanvasRenderingContext2D/beginPath)
+  - : Startet einen neuen Pfad und leert die Liste der Unterpfade. Rufen Sie diese Methode auf, wenn Sie einen neuen Pfad erstellen möchten.
+- [`CanvasRenderingContext2D.fill()`](/de/docs/Web/API/CanvasRenderingContext2D/fill)
+  - : Füllt die Unterpfade des aktuellen Pfades mit dem aktuellen Füllstil.
+- [`CanvasRenderingContext2D.stroke()`](/de/docs/Web/API/CanvasRenderingContext2D/stroke)
+  - : Zeichnet die Umrandungen der Unterpfade des aktuellen Pfades mit dem aktuellen Linienstil.
+- [`CanvasRenderingContext2D.clip()`](/de/docs/Web/API/CanvasRenderingContext2D/clip)
+  - : Wandelt den aktuellen oder angegebenen Pfad in die aktuelle Clipping-Region um und verwendet die angegebene Füllregel, um zu bestimmen, welche Punkte im Pfad liegen. Nachfolgende Pfadänderungen erscheinen nur innerhalb des Clipping-Pfades.
+- [`CanvasRenderingContext2D.isPointInPath()`](/de/docs/Web/API/CanvasRenderingContext2D/isPointInPath)
+  - : Ein Boolean, dessen Wert `true` ist, wenn der angegebene Punkt im aktuellen oder angegebenen Pfad enthalten ist.
+- [`CanvasRenderingContext2D.isPointInStroke()`](/de/docs/Web/API/CanvasRenderingContext2D/isPointInStroke)
+  - : Ein Boolean, dessen Wert `true` ist, wenn der Punkt innerhalb des durch das Streichen eines Pfades eingefassten Bereichs liegt.
+
+### Bilder zeichnen
+
+- [`CanvasRenderingContext2D.drawImage()`](/de/docs/Web/API/CanvasRenderingContext2D/drawImage)
+  - : Zeichnet das angegebene Bild oder einen bestimmten Teil davon, optional in einer angegebenen Größe und Position.
+
+### Linienstile
+
+- [`CanvasRenderingContext2D.lineWidth`](/de/docs/Web/API/CanvasRenderingContext2D/lineWidth)
+  - : Eine Zahl, die die Linienstärke in Koordinatenraumeinheiten angibt.
+- [`CanvasRenderingContext2D.lineCap`](/de/docs/Web/API/CanvasRenderingContext2D/lineCap)
+  - : Typ der Enden an den Linienenden. Mögliche Werte: `butt` (Standard), `round`, `square`.
+- [`CanvasRenderingContext2D.lineJoin`](/de/docs/Web/API/CanvasRenderingContext2D/lineJoin)
+  - : Definiert die Art der Ecken, an denen zwei Linien aufeinandertreffen. Mögliche Werte: `round`, `bevel`, `miter` (Standard).
+- [`CanvasRenderingContext2D.miterLimit`](/de/docs/Web/API/CanvasRenderingContext2D/miterLimit)
+  - : Eine Zahl, die das Verhältnis der Gehrungslimit in Koordinatenraumeinheiten angibt.
+- [`CanvasRenderingContext2D.getLineDash()`](/de/docs/Web/API/CanvasRenderingContext2D/getLineDash)
+  - : Gibt das aktuelle Liniendash-Muster als [`Array`](/de/docs/Web/JavaScript/Reference/Global_Objects/Array) von Zahlen zurück, die die Längen der abwechselnden Striche und Lücken in Koordinatenraumeinheiten angeben.
+- [`CanvasRenderingContext2D.setLineDash()`](/de/docs/Web/API/CanvasRenderingContext2D/setLineDash)
+  - : Setzt die Liste der Linien- und Strichabstände als aktuelles Liniendash-Muster (wie bei der Strichzeichnung verwendet).
+- [`CanvasRenderingContext2D.lineDashOffset`](/de/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
+  - : Gibt an, wo ein Strichmuster auf einer Linie beginnen soll.
+
+### Pfade
+
+- [`CanvasRenderingContext2D.closePath()`](/de/docs/Web/API/CanvasRenderingContext2D/closePath)
+  - : Markiert den aktuellen Unterpfad als geschlossen, indem eine gerade Linie vom aktuellen Punkt zum Start gezeichnet wird, und beginnt einen neuen Unterpfad mit einem Punkt, der derselbe wie der Anfang und das Ende des neu geschlossenen Unterpfads ist. Wenn die Form bereits geschlossen ist oder nur einen Punkt hat, tut diese Funktion nichts.
+- [`CanvasRenderingContext2D.moveTo()`](/de/docs/Web/API/CanvasRenderingContext2D/moveTo)
+  - : Verschiebt den Startpunkt eines neuen Unterpfads an die (x, y)-Koordinaten.
+- [`CanvasRenderingContext2D.lineTo()`](/de/docs/Web/API/CanvasRenderingContext2D/lineTo)
+  - : Verbindet den letzten Punkt im aktuellen Unterpfad mit den angegebenen (x, y)-Koordinaten mit einer geraden Linie.
+- [`CanvasRenderingContext2D.bezierCurveTo()`](/de/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo)
+  - : Fügt dem aktuellen Pfad eine kubische Bézierkurve hinzu.
+- [`CanvasRenderingContext2D.quadraticCurveTo()`](/de/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo)
+  - : Fügt dem aktuellen Pfad eine quadratische Bézierkurve hinzu.
+- [`CanvasRenderingContext2D.arc()`](/de/docs/Web/API/CanvasRenderingContext2D/arc)
+  - : Fügt dem aktuellen Pfad einen kreisförmigen Bogen hinzu.
+- [`CanvasRenderingContext2D.arcTo()`](/de/docs/Web/API/CanvasRenderingContext2D/arcTo)
+  - : Fügt dem aktuellen Pfad einen Bogen mit den angegebenen Kontrollpunkten und dem Radius hinzu, der durch eine gerade Linie mit dem vorherigen Punkt verbunden ist.
+- [`CanvasRenderingContext2D.ellipse()`](/de/docs/Web/API/CanvasRenderingContext2D/ellipse)
+  - : Fügt dem aktuellen Pfad einen elliptischen Bogen hinzu.
+- [`CanvasRenderingContext2D.rect()`](/de/docs/Web/API/CanvasRenderingContext2D/rect)
+  - : Erstellt einen Pfad für ein Rechteck an der Position (x, y) mit einer durch _width_ und _height_ bestimmten Größe.
+- [`CanvasRenderingContext2D.roundRect()`](/de/docs/Web/API/CanvasRenderingContext2D/roundRect)
+  - : Erstellt einen Pfad für ein Rechteck mit abgerundeten Ecken an der Position (x, y) mit einer durch _width_ und _height_ bestimmten Größe und durch _radii_ bestimmten Radien.
+
+### Filter
+
+- [`CanvasRenderingContext2D.filter`](/de/docs/Web/API/CanvasRenderingContext2D/filter) {{Non-standard_Inline}}
+  - : Wendet einen CSS- oder SVG-Filter auf das Canvas an, z.B. um dessen Helligkeit oder Unschärfe zu ändern.
+
+## Beispiele
+
+Siehe vollständige Beispiele bei der [CSS Painting API](/de/docs/Web/API/CSS_Painting_API).
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
+
+## Siehe auch
+
+- [Verwendung der CSS Painting API](/de/docs/Web/API/CSS_Painting_API/Guide)
+- [CSS Painting API](/de/docs/Web/API/CSS_Painting_API)
+- [Houdini APIs](/de/docs/Web/API/Houdini_APIs)
diff --git a/files/de/web/api/paintworkletglobalscope/index.md b/files/de/web/api/paintworkletglobalscope/index.md
index c31dad234..546930016 100644
--- a/files/de/web/api/paintworkletglobalscope/index.md
+++ b/files/de/web/api/paintworkletglobalscope/index.md
@@ -2,7 +2,7 @@
 title: PaintWorkletGlobalScope
 slug: Web/API/PaintWorkletGlobalScope
 l10n:
-  sourceCommit: a1e28391445bdbae28d62b0a7490d18f6c893345
+  sourceCommit: bad620560c435cae3d3436b9b01ff654680af9a3
 ---
 
 {{APIRef("CSS Painting API")}}{{SeeCompatTable}}
@@ -11,32 +11,32 @@ Das **`PaintWorkletGlobalScope`**-Interface der [CSS Painting API](/de/docs/Web/
 
 ## Datenschutzbedenken
 
-Um ein Ausspähen besuchter Links zu vermeiden, ist diese Funktion in Chrome-basierten Browsern für {{HTMLElement("a")}}-Elemente mit einem [`href`](/de/docs/Web/HTML/Element/a#href)-Attribut und für deren Kindelemente derzeit deaktiviert. Details finden Sie in den folgenden Quellen:
+Um zu vermeiden, dass besuchte Links offengelegt werden, ist diese Funktion derzeit in Chrome-basierten Browsern für {{HTMLElement("a")}}-Elemente mit einem `href`-Attribut sowie für deren Kind-Elemente deaktiviert. Weitere Details finden Sie unter:
 
-- Der Abschnitt über [datenschutzbezogene Überlegungen](https://drafts.css-houdini.org/css-paint-api/#privacy-considerations) in der CSS Painting API
-- Das CSS Painting API Spezifikationsproblem ["CSS Paint API leaks browsing history"](https://github.com/w3c/css-houdini-drafts/issues/791)
+- Dem [Datenschutzüberlegungen-Abschnitt](https://drafts.css-houdini.org/css-paint-api/#privacy-considerations) der CSS Painting API
+- Dem CSS Painting API Spezifikationsproblem ["CSS Paint API leaks browsing history"](https://github.com/w3c/css-houdini-drafts/issues/791)
 
 ## Instanzeigenschaften
 
 _Dieses Interface erbt Eigenschaften von [`WorkletGlobalScope`](/de/docs/Web/API/WorkletGlobalScope)._
 
 - [`PaintWorkletGlobalScope.devicePixelRatio`](/de/docs/Web/API/PaintWorkletGlobalScope/devicePixelRatio) {{ReadOnlyInline}} {{Experimental_Inline}}
-  - : Gibt das aktuelle Verhältnis der physischen zu den logischen Pixeln des Geräts zurück.
+  - : Gibt das Verhältnis der physischen Pixel zu logischen Pixeln des aktuellen Geräts zurück.
 
 ## Instanzmethoden
 
 _Dieses Interface erbt Methoden von [`WorkletGlobalScope`](/de/docs/Web/API/WorkletGlobalScope)._
 
 - [`PaintWorkletGlobalScope.registerPaint()`](/de/docs/Web/API/PaintWorkletGlobalScope/registerPaint) {{Experimental_Inline}}
-  - : Registriert eine Klasse, um programmatisch ein Bild zu generieren, wo eine CSS-Eigenschaft eine Datei erwartet.
+  - : Registriert eine Klasse, um programmgesteuert ein Bild zu erzeugen, wo eine CSS-Eigenschaft eine Datei erwartet.
 
 ## Beispiele
 
-Die folgenden drei Beispiele zeigen zusammen das Erstellen, Laden und Verwenden eines Paint-`Worklets`.
+Die folgenden drei Beispiele zeigen zusammen das Erstellen, Laden und Verwenden eines Paint-`Worklet`.
 
 ### Erstellen eines Paint-Worklets
 
-Das folgende Beispiel zeigt ein Worklet-Modul. Dies sollte in einer separaten JS-Datei sein. Beachten Sie, dass `registerPaint()` ohne einen Verweis auf ein Paint-`Worklet` aufgerufen wird.
+Das folgende Beispiel zeigt ein Worklet-Modul. Dies sollte in einer separaten js-Datei sein. Beachten Sie, dass `registerPaint()` ohne Referenz auf ein Paint-`Worklet` aufgerufen wird.
 
 ```js
 class CheckerboardPainter {
@@ -67,7 +67,7 @@ registerPaint("checkerboard", CheckerboardPainter);
 
 ### Laden eines Paint-Worklets
 
-Das folgende Beispiel zeigt, wie das oben beschriebene Worklet aus seiner JS-Datei geladen wird und dies durch Feature-Erkennung geschieht.
+Das folgende Beispiel demonstriert das Laden des oben angegebenen Worklets aus seiner js-Datei und tut dies durch Feature-Erkennung.
 
 ```js
 if ("paintWorklet" in CSS) {
@@ -75,9 +75,9 @@ if ("paintWorklet" in CSS) {
 }
 ```
 
-### Verwenden eines Paint-Worklets
+### Verwendung eines Paint-Worklets
 
-Dieses Beispiel zeigt, wie man ein Paint-`Worklet` in einem Stylesheet verwendet, einschließlich der einfachsten Möglichkeit, eine Rückfalllösung bereitzustellen, wenn `CSS.paintWorklet` nicht unterstützt wird.
+Dieses Beispiel zeigt, wie ein Paint-`Worklet` in einem Stylesheet verwendet wird, einschließlich der einfachsten Methode, um eine Fallback-Lösung bereitzustellen, falls `CSS.paintWorklet` nicht unterstützt wird.
 
 ```html
 <style>
@@ -89,7 +89,7 @@ Dieses Beispiel zeigt, wie man ein Paint-`Worklet` in einem Stylesheet verwendet
 <textarea></textarea>
 ```
 
-Sie können auch die {{cssxref('@supports')}}-At-Regel verwenden.
+Sie können auch die {{cssxref('@supports')}}-Regel verwenden.
 
 ```css
 @supports (background: paint(id)) {
@@ -107,5 +107,6 @@ Sie können auch die {{cssxref('@supports')}}-At-Regel verwenden.
 
 ## Siehe auch
 
+- [Verwendung der CSS Painting API](/de/docs/Web/API/CSS_Painting_API/Guide)
 - [CSS Painting API](/de/docs/Web/API/CSS_Painting_API)
 - [Houdini APIs](/de/docs/Web/API/Houdini_APIs)
diff --git a/files/de/web/api/textmetrics/index.md b/files/de/web/api/textmetrics/index.md
index 8357b9dea..7428d974f 100644
--- a/files/de/web/api/textmetrics/index.md
+++ b/files/de/web/api/textmetrics/index.md
@@ -2,45 +2,45 @@
 title: TextMetrics
 slug: Web/API/TextMetrics
 l10n:
-  sourceCommit: daeff1a2efaae366bcc8b6d911d86985646e665e
+  sourceCommit: 0a4d5b451cc54599ed2b99cef4fdd39c3fd96a3d
 ---
 
 {{APIRef("Canvas API")}}{{AvailableInWorkers}}
 
-Das **`TextMetrics`**-Interface repräsentiert die Dimensionen eines Textstücks auf der Leinwand; eine `TextMetrics`-Instanz kann mit der Methode [`CanvasRenderingContext2D.measureText()`](/de/docs/Web/API/CanvasRenderingContext2D/measureText) abgerufen werden.
+Das **`TextMetrics`**-Interface repräsentiert die Dimensionen eines Textstücks auf dem `canvas`; eine `TextMetrics`-Instanz kann mit der Methode [`CanvasRenderingContext2D.measureText()`](/de/docs/Web/API/CanvasRenderingContext2D/measureText) abgerufen werden.
 
-## Instanzeigenschaften
+## Instanz-Eigenschaften
 
 - [`TextMetrics.width`](/de/docs/Web/API/TextMetrics/width) {{ReadOnlyInline}}
-  - : Gibt die Breite eines Segments von Inline-Text in CSS-Pixeln zurück. Es berücksichtigt die aktuelle Schriftart des Kontextes.
+  - : Gibt die Breite eines Segments von Inline-Text in CSS-Pixeln zurück. Sie berücksichtigt die aktuelle Schriftart des Kontexts.
 - [`TextMetrics.actualBoundingBoxLeft`](/de/docs/Web/API/TextMetrics/actualBoundingBoxLeft) {{ReadOnlyInline}}
-  - : Abstand parallel zur Grundlinie vom Ausrichtungspunkt, der durch die [`CanvasRenderingContext2D.textAlign`](/de/docs/Web/API/CanvasRenderingContext2D/textAlign)-Eigenschaft angegeben wird, zur linken Seite des Begrenzungsrechtecks des gegebenen Textes, in CSS-Pixeln; positive Zahlen zeigen einen Abstand nach links vom gegebenen Ausrichtungspunkt an.
+  - : Abstand parallel zur Grundlinie vom Ausrichtungspunkt, der durch die [`CanvasRenderingContext2D.textAlign`](/de/docs/Web/API/CanvasRenderingContext2D/textAlign)-Eigenschaft angegeben wird, zur linken Seite des Begrenzungsrechtecks des angegebenen Textes, in CSS-Pixeln; positive Zahlen zeigen einen Abstand nach links vom gegebenen Ausrichtungspunkt.
 - [`TextMetrics.actualBoundingBoxRight`](/de/docs/Web/API/TextMetrics/actualBoundingBoxRight) {{ReadOnlyInline}}
-  - : Gibt den Abstand vom Ausrichtungspunkt, der durch die [`CanvasRenderingContext2D.textAlign`](/de/docs/Web/API/CanvasRenderingContext2D/textAlign)-Eigenschaft angegeben wird, zur rechten Seite des Begrenzungsrechtecks des gegebenen Textes, in CSS-Pixeln zurück. Der Abstand wird parallel zur Grundlinie gemessen.
+  - : Gibt den Abstand vom Ausrichtungspunkt, der durch die [`CanvasRenderingContext2D.textAlign`](/de/docs/Web/API/CanvasRenderingContext2D/textAlign)-Eigenschaft angegeben wird, zur rechten Seite des Begrenzungsrechtecks des angegebenen Textes in CSS-Pixeln zurück. Der Abstand wird parallel zur Grundlinie gemessen.
 - [`TextMetrics.fontBoundingBoxAscent`](/de/docs/Web/API/TextMetrics/fontBoundingBoxAscent) {{ReadOnlyInline}}
-  - : Gibt den Abstand von der durch das [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Attribut angegebenen horizontalen Linie zur Oberseite des höchsten Begrenzungsrechtecks aller Schriftarten, die verwendet werden, um den Text darzustellen, in CSS-Pixeln zurück.
+  - : Gibt den Abstand von der horizontalen Linie, die durch das [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Attribut angezeigt wird, zur Oberseite des höchsten Begrenzungsrechtecks aller Schriften zurück, die verwendet werden, um den Text zu rendern, in CSS-Pixeln.
 - [`TextMetrics.fontBoundingBoxDescent`](/de/docs/Web/API/TextMetrics/fontBoundingBoxDescent) {{ReadOnlyInline}}
-  - : Gibt den Abstand von der durch das [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Attribut angegebenen horizontalen Linie zur Unterseite des Begrenzungsrechtecks aller Schriftarten, die verwendet werden, um den Text darzustellen, in CSS-Pixeln zurück.
+  - : Gibt den Abstand von der horizontalen Linie, die durch das [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Attribut angezeigt wird, zur Unterseite des Begrenzungsrechtecks aller Schriften zurück, die verwendet werden, um den Text zu rendern, in CSS-Pixeln.
 - [`TextMetrics.actualBoundingBoxAscent`](/de/docs/Web/API/TextMetrics/actualBoundingBoxAscent) {{ReadOnlyInline}}
-  - : Gibt den Abstand von der durch das [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Attribut angegebenen horizontalen Linie zur Oberseite des Begrenzungsrechtecks, das verwendet wird, um den Text darzustellen, in CSS-Pixeln zurück.
+  - : Gibt den Abstand von der horizontalen Linie, die durch das [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Attribut angezeigt wird, zur Oberseite des Begrenzungsrechtecks zurück, das verwendet wird, um den Text zu rendern, in CSS-Pixeln.
 - [`TextMetrics.actualBoundingBoxDescent`](/de/docs/Web/API/TextMetrics/actualBoundingBoxDescent) {{ReadOnlyInline}}
-  - : Gibt den Abstand von der durch das [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Attribut angegebenen horizontalen Linie zur Unterseite des Begrenzungsrechtecks, das verwendet wird, um den Text darzustellen, in CSS-Pixeln zurück.
+  - : Gibt den Abstand von der horizontalen Linie, die durch das [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Attribut angezeigt wird, zur Unterseite des Begrenzungsrechtecks zurück, das verwendet wird, um den Text zu rendern, in CSS-Pixeln.
 - [`TextMetrics.emHeightAscent`](/de/docs/Web/API/TextMetrics/emHeightAscent) {{ReadOnlyInline}}
-  - : Gibt den Abstand von der durch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft angegebenen horizontalen Linie zur Oberseite des _em_-Quadrats im Zeilenkasten, in CSS-Pixeln zurück.
+  - : Gibt den Abstand von der horizontalen Linie, die durch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft angezeigt wird, zur Oberseite des _em_-Quadrats im Linienkasten zurück, in CSS-Pixeln.
 - [`TextMetrics.emHeightDescent`](/de/docs/Web/API/TextMetrics/emHeightDescent) {{ReadOnlyInline}}
-  - : Gibt den Abstand von der durch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft angegebenen horizontalen Linie zur Unterseite des _em_-Quadrats im Zeilenkasten, in CSS-Pixeln zurück.
+  - : Gibt den Abstand von der horizontalen Linie, die durch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft angezeigt wird, zur Unterseite des _em_-Quadrats im Linienkasten zurück, in CSS-Pixeln.
 - [`TextMetrics.hangingBaseline`](/de/docs/Web/API/TextMetrics/hangingBaseline) {{ReadOnlyInline}}
-  - : Gibt den Abstand von der durch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft angegebenen horizontalen Linie zur Hängelinie des Zeilenkastens, in CSS-Pixeln zurück.
+  - : Gibt den Abstand von der horizontalen Linie, die durch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft angezeigt wird, zur hängenden Grundlinie des Linienkastens zurück, in CSS-Pixeln.
 - [`TextMetrics.alphabeticBaseline`](/de/docs/Web/API/TextMetrics/alphabeticBaseline) {{ReadOnlyInline}}
-  - : Gibt den Abstand von der durch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft angegebenen horizontalen Linie zur alphabetischen Grundlinie des Zeilenkastens, in CSS-Pixeln zurück.
+  - : Gibt den Abstand von der horizontalen Linie, die durch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft angezeigt wird, zur {{Glossary("/Baseline/Typography", "alphabetischen Grundlinie")}} des Linienkastens zurück, in CSS-Pixeln.
 - [`TextMetrics.ideographicBaseline`](/de/docs/Web/API/TextMetrics/ideographicBaseline) {{ReadOnlyInline}}
-  - : Gibt den Abstand von der durch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft angegebenen horizontalen Linie zur ideographischen Grundlinie des Zeilenkastens, in CSS-Pixeln zurück.
+  - : Gibt den Abstand von der horizontalen Linie, die durch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft angezeigt wird, zur ideografischen Grundlinie des Linienkastens zurück, in CSS-Pixeln.
 
 ## Beispiele
 
 ### Veranschaulichung der Grundlinien
 
-Dieses Beispiel demonstriert die Grundlinien, die das `TextMetrics`-Objekt enthält. Die Standard-Grundlinie ist die `alphabeticBaseline`. Siehe auch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft.
+Dieses Beispiel zeigt die Grundlinien, die das `TextMetrics`-Objekt enthält. Die Standard-Grundlinie ist die `alphabeticBaseline`. Siehe auch die [`CanvasRenderingContext2D.textBaseline`](/de/docs/Web/API/CanvasRenderingContext2D/textBaseline)-Eigenschaft.
 
 #### HTML
 
@@ -97,9 +97,9 @@ baselines.forEach((baseline, index) => {
 
 ### Messen der Textbreite
 
-Beim Messen der X-Richtung eines Textstücks kann die Summe von `actualBoundingBoxLeft` und `actualBoundingBoxRight` breiter sein als die Breite des Inline-Blocks (`width`), aufgrund von geneigten/kursiven Schriftarten, bei denen Zeichen über ihre Breite hinausragen.
+Beim Messen der x-Richtung eines Textstücks kann die Summe von `actualBoundingBoxLeft` und `actualBoundingBoxRight` breiter als die Breite des Inline-Kastens (`width`) sein, aufgrund schräger/italischer Schriften, bei denen Zeichen über ihre Fortschrittsbreite hinausragen.
 
-Es kann daher nützlich sein, die Summe von `actualBoundingBoxLeft` und `actualBoundingBoxRight` zu verwenden, um die absolute Textbreite genauer zu berechnen:
+Es kann daher nützlich sein, die Summe von `actualBoundingBoxLeft` und `actualBoundingBoxRight` als genauere Methode zu verwenden, um die absolute Textbreite zu erhalten:
 
 ```js
 const canvas = document.getElementById("canvas");
@@ -127,5 +127,5 @@ console.log(
 
 ## Siehe auch
 
-- Erzeugermethode in [`CanvasRenderingContext2D`](/de/docs/Web/API/CanvasRenderingContext2D)
-- Das {{HTMLElement("canvas")}}-Element und seine zugehörige Schnittstelle, [`HTMLCanvasElement`](/de/docs/Web/API/HTMLCanvasElement)
+- Erstellermethode in [`CanvasRenderingContext2D`](/de/docs/Web/API/CanvasRenderingContext2D)
+- Das {{HTMLElement("canvas")}}-Element und sein zugehöriges Interface, [`HTMLCanvasElement`](/de/docs/Web/API/HTMLCanvasElement)
diff --git a/files/de/web/css/alignment-baseline/index.md b/files/de/web/css/alignment-baseline/index.md
index e03ecf19f..e1962c78e 100644
--- a/files/de/web/css/alignment-baseline/index.md
+++ b/files/de/web/css/alignment-baseline/index.md
@@ -2,17 +2,17 @@
 title: alignment-baseline
 slug: Web/CSS/alignment-baseline
 l10n:
-  sourceCommit: 169f071e7bdff5e9b03cc56259e93907c5ea4f1d
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`alignment-baseline`** [CSS](/de/docs/Web/CSS) Eigenschaft spezifiziert die spezifische {{Glossary("Baseline/Typography", "Baseline")}}, die verwendet wird, um den Text des Box-Elements und inline-Level-Inhalte auszurichten. **Baseline-Ausrichtung** ist die Beziehung zwischen den Baselines mehrerer Ausrichtungsobjekte innerhalb eines Ausrichtungskontextes. Bei der Durchführung der Baseline-Ausrichtung gibt der Wert der Eigenschaft `alignment-baseline` an, welche Baseline des Box-Elements an die entsprechende Baseline seines Ausrichtungskontextes ausgerichtet wird.
+Die **`alignment-baseline`** [CSS](/de/docs/Web/CSS)-Eigenschaft legt die spezifische {{Glossary("Baseline/Typography", "Grundlinie")}} fest, die verwendet wird, um den Text und den Inhalt auf Inline-Ebene der Box auszurichten. **Grundlinienausrichtung** bezieht sich auf die Beziehung zwischen den Grundlinien mehrerer Ausrichtungssubjekte innerhalb eines Ausrichtungskontextes. Bei der Ausführung der Grundlinienausrichtung gibt der Wert der Eigenschaft `alignment-baseline` an, welche Grundlinie der Box an die entsprechende Grundlinie ihres Ausrichtungskontextes ausgerichtet wird.
 
 > [!NOTE]
-> Die `alignment-baseline`-Eigenschaft hat nur Auswirkungen auf Inline-Level-Boxen, Flex-Elemente, Grid-Elemente, Tabellenzellen und die {{SVGElement("text")}}, {{SVGElement("textPath")}} und {{SVGElement("tspan")}} SVG-Elemente. Falls vorhanden, überschreibt sie das {{SVGAttr("alignment-baseline")}} Attribut der Form.
+> Die `alignment-baseline`-Eigenschaft hat nur Einfluss auf Boxen auf Inline-Ebene, Flex-Elemente, Grid-Elemente, Tabellenzellen und die {{SVGElement("text")}}, {{SVGElement("textPath")}}, und {{SVGElement("tspan")}} SVG-Elemente. Wenn vorhanden, überschreibt sie das {{SVGAttr("alignment-baseline")}}-Attribut der Form.
 
-In einem Inline-Formatierkontext teilen sich Inline-Level-Boxfragmente und Glyphen einen Ausrichtungskontext, der durch ihr übergeordnetes Inline-Boxfragment entlang seiner Inline-Achse etabliert wird. Im SVG-Textlayout geben diese Werte stattdessen die Baseline an, die an der aktuellen SVG-Textposition ausgerichtet wird.
+In einem Inline-Formatierungskontext teilen Inline-Level-Boxfragmente und Glyphen einen Ausrichtungskontext, der von ihrem übergeordneten Inline-Boxfragment entlang seiner Inline-Achse festgelegt wird. In der SVG-Textanordnung geben diese Werte stattdessen die Grundlinie an, die an die aktuelle Textposition des SVG ausgerichtet ist.
 
 ## Syntax
 
@@ -51,37 +51,37 @@ alignment-baseline: unset;
 
 - `baseline`
 
-  - : Verwenden Sie den Wert von {{cssxref("dominant-baseline")}} des übergeordneten Elements.
+  - : Verwenden Sie den Wert {{cssxref("dominant-baseline")}} des übergeordneten Elements.
 
 - `alphabetic`
 
-  - : Wird beim Schreiben in lateinisch, kyrillisch, griechisch und vielen anderen Schriftsystemen verwendet; gleicht die alphabetische Baseline der Box mit der ihres übergeordneten Elements ab, entsprechend dem unteren Rand der meisten, aber nicht aller Zeichen.
+  - : Wird beim Schreiben in lateinischen, kyrillischen, griechischen und vielen anderen Schriften verwendet; passt die alphabetische Grundlinie der Box an die des übergeordneten Elements an, entsprechend dem unteren Bereich der meisten, aber nicht aller Zeichen.
 
 - `central`
 
-  - : Gleicht die zentrale Baseline der Box mit der zentralen Baseline ihres übergeordneten Elements ab, entsprechend der ideographischen zentralen Baseline, zur Hälfte zwischen der ideographischen-Unter- und der ideographischen-Über-Baseline.
+  - : Passt die zentrale Grundlinie der Box an die zentrale Grundlinie des übergeordneten Elements an, entsprechend der ideografischen Zentralgrundlinie, die sich zwischen den ideografischen Unter- und Obergrundlinien befindet.
 
 - `ideographic`
 
-  - : Gleicht die ideographische Unterkante der Zeichenfläche der Box mit der ihres übergeordneten Elements ab, wobei die abgeleitete Baselinetabelle mit der ideographischen Baselinetabelle der Schrift konstruiert wird.
+  - : Passt die untere Seite der ideografischen Zeichenfläche der Box an die des übergeordneten Elements an, wobei die abgeleitete Grundlinientabelle mit der ideografischen Grundlinientabelle der Schriftart erstellt wird.
 
 - `mathematical`
 
-  - : Gleicht die mathematische Baseline der Box mit der ihres übergeordneten Elements ab, entsprechend der zentralen Baseline, um die mathematische Zeichen gestaltet sind.
+  - : Passt die mathematische Grundlinie der Box an die des übergeordneten Elements an, entsprechend der zentralen Grundlinie, um die mathematische Zeichen erstellt werden.
 
 - `middle`
 
-  - : Richtet den vertikalen Mittelpunkt der Box mit der Baseline der übergeordneten Box plus der Hälfte der x-Höhe des übergeordneten Elements aus. Verwendet die x-Mitten-Baselines; außer unter [`text-orientation: upright;`](/de/docs/Web/CSS/text-orientation) (wo die alphabetischen und x-Höhen-Baselines im Wesentlichen bedeutungslos sind), in welchem Fall stattdessen die `central` Baseline verwendet wird.
+  - : Richtet den vertikalen Mittelpunkt der Box mit der Grundlinie der übergeordneten Box plus die Hälfte der x-Höhe des übergeordneten Elements aus. Verwendet die x-mittleren Grundlinien; außer bei [`text-orientation: upright;`](/de/docs/Web/CSS/text-orientation) (wo die alphabetischen und x-Höhen-Grundlinien im Wesentlichen bedeutungslos sind), in diesem Fall wird stattdessen die `central`-Grundlinie verwendet.
 
 - `text-bottom`
 
-  - : Gleicht den Boden der Box mit dem oberen Rand des Inhaltsbereichs des übergeordneten Elements ab, unter Verwendung des unteren Linienrandes der Inhaltsbox eines Inline-Elements.
+  - : Passt den unteren Bereich der Box an die obere Bereich des Inhaltsbereichs des übergeordneten Elements an, verwendet den unterliegenden Rand der Inline-Inhaltsbox.
 
 - `text-top`
-  - : Gleicht den oberen Rand der Box mit dem oberen Rand des Inhaltsbereichs des übergeordneten Elements ab; der obere Linienrand der Inhaltsbox eines Inline-Elements.
+  - : Passt den oberen Bereich der Box an die obere Bereich des Inhaltsbereichs des übergeordneten Elements an; der überliegende Rand der Inline-Inhaltsbox.
 
 > [!NOTE]
-> In SVG2 wurden `auto`, `before-edge` und `after-edge` veraltet und `text-before-edge` ist ein Alias für `text-top`, und `text-after-edge` ist ein Alias für `text-bottom`. Diese Schlüsselwörter sollten nicht als Teil der {{cssxref("vertical-align")}} Kurzform-Eigenschaft verwendet werden. Browser unterstützen `auto` als Synonym für `baseline` und `hanging`, wobei der Ausrichtungspunkt des auszurichtenden Objekts mit der "hängenden" Baseline des übergeordneten Textelement-Inhalts ausgerichtet wird, aber keiner der beiden ist Teil der Spezifikation.
+> In SVG2 wurden `auto`, `before-edge` und `after-edge` abgelehnt und `text-before-edge` ist ein Alias für `text-top`, und `text-after-edge` ist ein Alias für `text-bottom`. Diese Schlüsselwörter sollten nicht als Teil der {{cssxref("vertical-align")}}-Kurzform-Eigenschaft verwendet werden. Browser unterstützen `auto` als Synonym für `baseline` und `hanging`, wobei der Ausrichtungspunkt des auszurichtenden Objekts mit der "hängenden" Grundlinie des übergeordneten Textelementinhalts ausgerichtet ist, aber beide gehören nicht zur Spezifikation.
 
 ## Formale Definition
 
@@ -160,6 +160,6 @@ text:nth-of-type(8) {
 ## Siehe auch
 
 - {{cssxref("dominant-baseline")}}
-- {{SVGAttr("alignment-baseline")}} SVG-Attribut
-- [CSS Inline Layout](/de/docs/Web/CSS/CSS_inline_layout) Modul
-- [CSS Box Alignment](/de/docs/Web/CSS/CSS_box_alignment) Modul
+- SVG {{SVGAttr("alignment-baseline")}} Attribut
+- [CSS Inline-Layout](/de/docs/Web/CSS/CSS_inline_layout) Modul
+- [CSS Box-Ausrichtung](/de/docs/Web/CSS/CSS_box_alignment) Modul
diff --git a/files/de/web/css/clip-path/index.md b/files/de/web/css/clip-path/index.md
index a8744bb02..d96f58c3c 100644
--- a/files/de/web/css/clip-path/index.md
+++ b/files/de/web/css/clip-path/index.md
@@ -2,12 +2,12 @@
 title: clip-path
 slug: Web/CSS/clip-path
 l10n:
-  sourceCommit: 2c741257dd3abbd28d7d5f035800002f3b578b89
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`clip-path`** [CSS](/de/docs/Web/CSS) Eigenschaft erstellt eine Clipping-Region, die festlegt, welcher Teil eines Elements angezeigt werden soll. Teile, die sich innerhalb der Region befinden, werden angezeigt, während die außerhalb verborgen bleiben.
+Die **`clip-path`** [CSS](/de/docs/Web/CSS) Eigenschaft erstellt eine Schnittregion, die festlegt, welcher Teil eines Elements angezeigt werden soll. Teile, die sich innerhalb der Region befinden, werden angezeigt, während die außerhalb liegenden verborgen werden.
 
 {{EmbedInteractiveExample("pages/css/clip-path.html")}}
 
@@ -51,57 +51,57 @@ clip-path: revert-layer;
 clip-path: unset;
 ```
 
-Die `clip-path` Eigenschaft wird als ein oder eine Kombination der unten aufgeführten Werte angegeben.
+Die `clip-path` Eigenschaft wird als eine oder eine Kombination der unten aufgeführten Werte angegeben.
 
 ### Werte
 
 - `<clip-source>`
-  - : Ein {{cssxref("url_value", "&lt;url&gt;")}}, das auf ein [SVG](/de/docs/Web/SVG) {{SVGElement("clipPath")}} Element verweist.
+  - : Ein {{cssxref("url_value", "&lt;url&gt;")}} Verweis auf ein [SVG](/de/docs/Web/SVG) {{SVGElement("clipPath")}} Element.
 - {{cssxref("&lt;basic-shape&gt;")}}
 
-  - : Eine Form, deren Größe und Position durch den `<geometry-box>` Wert definiert wird. Wenn keine Geometrie-Box angegeben ist, wird die `border-box` als Referenzbox verwendet. Eine der folgenden Optionen:
+  - : Eine Form, deren Größe und Position durch den `<geometry-box>` Wert definiert ist. Wenn keine Geometrie-Box angegeben ist, wird die `border-box` als Referenzbox verwendet. Eine der folgenden:
 
     - {{cssxref("basic-shape/inset","inset()")}}
-      - : Definiert ein eingesetztes Rechteck.
+      - : Definiert ein eingefügtes Rechteck.
     - {{cssxref("basic-shape/circle","circle()")}}
-      - : Definiert einen Kreis unter Verwendung eines Radius und einer Position.
+      - : Definiert einen Kreis mit einem Radius und einer Position.
     - {{cssxref("basic-shape/ellipse","ellipse()")}}
-      - : Definiert eine Ellipse unter Verwendung von zwei Radien und einer Position.
+      - : Definiert eine Ellipse mit zwei Radien und einer Position.
     - {{cssxref("basic-shape/polygon","polygon()")}}
-      - : Definiert ein Polygon unter Verwendung einer SVG-Füllregel und einer Reihe von Eckpunkten.
+      - : Definiert ein Polygon unter Verwendung einer SVG-Füllregel und einer Menge von Ecken.
     - {{cssxref("basic-shape/path","path()")}}
       - : Definiert eine Form unter Verwendung einer optionalen SVG-Füllregel und einer SVG-Pfaddefinition.
     - {{cssxref("basic-shape/rect","rect()")}}
-      - : Definiert ein Rechteck, indem die angegebenen Abstände von den Rändern der Referenzbox verwendet werden.
+      - : Definiert ein Rechteck mit den angegebenen Abständen von den Kanten der Referenzbox.
     - {{cssxref("basic-shape/shape","shape()")}}
-      - : Definiert eine Form unter Verwendung einer optionalen SVG-Füllregel und von Formbefehlen für Linien, Kurven und Bögen.
+      - : Definiert eine Form unter Verwendung einer optionalen SVG-Füllregel und Formbefehlen für Linien, Kurven und Bögen.
     - {{cssxref("basic-shape/xywh","xywh()")}}
-      - : Definiert ein Rechteck, indem die angegebenen Abstände von der Oberkante und der linken Kante der Referenzbox sowie die angegebene Breite und Höhe des Rechtecks verwendet werden.
+      - : Definiert ein Rechteck mit den angegebenen Abständen von den oberen und linken Kanten der Referenzbox und der angegebenen Breite und Höhe des Rechtecks.
 
 - `<geometry-box>`
 
-  - : Wenn in Kombination mit einer `<basic-shape>` angegeben, definiert dieser Wert die Referenzbox für die Grundform. Wenn er allein angegeben wird, verursacht er, dass die Kanten der angegebenen Box, einschließlich jeder Eckformgebung (wie z.B. {{cssxref("border-radius")}}), der Clipping-Pfad werden. Die Geometrie-Box kann einen der folgenden Werte haben:
+  - : Wenn in Kombination mit einer `<basic-shape>` angegeben, definiert dieser Wert die Referenzbox für die Grundform. Wenn alleine angegeben, führen die Ränder der angegebenen Box, einschließlich jeder Eckformung (wie {{cssxref("border-radius")}}), zur Schnittpfad-Erstellung. Die Geometrie-Box kann einen der folgenden Werte annehmen:
 
     - `margin-box`
-      - : Verwendet die [margin box](/de/docs/Web/CSS/CSS_shapes/From_box_values#margin-box) als Referenzbox.
+      - : Verwendet die [margin-box](/de/docs/Web/CSS/CSS_shapes/From_box_values#margin-box) als Referenzbox.
     - `border-box`
-      - : Verwendet die [border box](/de/docs/Web/CSS/CSS_shapes/From_box_values#border-box) als Referenzbox.
+      - : Verwendet die [border-box](/de/docs/Web/CSS/CSS_shapes/From_box_values#border-box) als Referenzbox.
     - `padding-box`
-      - : Verwendet die [padding box](/de/docs/Web/CSS/CSS_shapes/From_box_values#padding-box) als Referenzbox.
+      - : Verwendet die [padding-box](/de/docs/Web/CSS/CSS_shapes/From_box_values#padding-box) als Referenzbox.
     - `content-box`
-      - : Verwendet die [content box](/de/docs/Web/CSS/CSS_shapes/From_box_values#content-box) als Referenzbox.
+      - : Verwendet die [content-box](/de/docs/Web/CSS/CSS_shapes/From_box_values#content-box) als Referenzbox.
     - `fill-box`
       - : Verwendet die Objektbegrenzungsbox als Referenzbox.
     - `stroke-box`
-      - : Verwendet die Begrenzungsbox des Strichs als Referenzbox.
+      - : Verwendet die Strichbegrenzungsbox als Referenzbox.
     - `view-box`
-      - : Verwendet den nächsten SVG-Ansichtsfenster als Referenzbox. Wenn ein {{SVGAttr("viewBox")}} Attribut für das Element, das den SVG-Ansichtsfenster erstellt, angegeben ist, wird die Referenzbox am Ursprung des vom `viewBox` Attribut festgelegten Koordinatensystems positioniert und die Dimension der Größe der Referenzbox wird auf die Breite und Höhe des `viewBox` Attributs eingestellt.
+      - : Verwendet den nächstgelegenen SVG-Viewport als Referenzbox. Wenn ein {{SVGAttr("viewBox")}} Attribut für das Element, das den SVG-Viewport erstellt, angegeben wird, wird die Referenzbox an der Ursprungsposition des durch das `viewBox` Attribut festgelegten Koordinatensystems positioniert und die Dimension der Größe der Referenzbox auf die Breiten- und Höhenwerte des `viewBox` Attributs gesetzt.
 
 - `none`
-  - : Es wird kein Clipping-Pfad erstellt.
+  - : Es wird kein Schnittpfad erstellt.
 
 > [!NOTE]
-> Ein berechneter Wert, der nicht **`none`** ist, führt zur Erstellung eines neuen [stapelnden Kontexts](/de/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context), ebenso wie CSS {{cssxref("opacity")}} für Werte außer `1`.
+> Ein berechneter Wert, der nicht **`none`** ist, führt auf dieselbe Weise wie CSS {{cssxref("opacity")}} bei Werten ungleich `1` zur Erstellung eines neuen [Stacking-Kontexts](/de/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context).
 
 ## Formale Definition
 
@@ -635,10 +635,9 @@ clipPathSelect.addEventListener("change", (evt) => {
 
 ## Siehe auch
 
-- [Formen in Clipping und Maskierung – und wie man sie verwendet](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
-- CSS Eigenschaften: {{cssxref("mask")}}, {{cssxref("filter")}}
-- [Anwenden von SVG-Effekten auf HTML-Inhalt](/de/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
-- SVG Attribute:
-
-  - {{SVGAttr("clip-path")}}
-  - {{SVGAttr("clip-rule")}}
+- {{CSSxRef("clip-rule")}}
+- {{CSSxRef("mask")}}
+- {{CSSxRef("filter")}}
+- SVG {{SVGAttr("clip-path")}} Attribut
+- [Formen beim Beschneiden und Maskieren – und wie Sie sie verwenden können](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
+- [Anwendung von SVG-Effekten auf HTML-Inhalte](/de/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
diff --git a/files/de/web/css/color-interpolation-filters/index.md b/files/de/web/css/color-interpolation-filters/index.md
index 65be53853..cb30f5a6e 100644
--- a/files/de/web/css/color-interpolation-filters/index.md
+++ b/files/de/web/css/color-interpolation-filters/index.md
@@ -2,18 +2,18 @@
 title: color-interpolation-filters
 slug: Web/CSS/color-interpolation-filters
 l10n:
-  sourceCommit: 6a01359152716aafd62878599603f6ce76a9a9bf
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`color-interpolation-filters`** [CSS](/de/docs/Web/CSS) Eigenschaft gibt den Farbraum für Bildbearbeitungsoperationen an, die über SVG-Filtereffekte durchgeführt werden. Wenn explizit deklariert, überschreibt der Wert der CSS-Eigenschaft jeden im {{SVGAttr("color-interpolation-filters")}}-Attribut des Elements angegebenen Wert.
+Die **`color-interpolation-filters`** [CSS](/de/docs/Web/CSS)-Eigenschaft spezifiziert den Farbraum für Bildgebungsoperationen, die über SVG-Filtereffekte durchgeführt werden. Wenn explizit deklariert, überschreibt der Wert der CSS-Eigenschaft jeden Wert, der im Attribut {{SVGAttr("color-interpolation-filters")}} des Elements angegeben ist.
 
 > [!NOTE]
-> Die Eigenschaft {{SVGAttr("color-interpolation-filters")}} ist nur für SVG-Filteroperationen relevant. Sie hat _keinen_ Effekt auf Filterprimitiven wie {{SVGElement("feOffset")}}, {{SVGElement("feImage")}}, {{SVGElement("feTile")}}, und {{SVGElement("feFlood")}}, sondern gilt stattdessen für die verschiedenen Filtereffektelemente (z. B. {{SVGElement('feBlend')}}); siehe die SVG-Seite {{SVGAttr('color-interpolation-filters')}} für eine vollständige Liste.
+> Die {{SVGAttr("color-interpolation-filters")}}-Eigenschaft bezieht sich nur auf SVG-Filteroperationen. Sie hat _keine_ Auswirkung auf Filterprimitive wie {{SVGElement("feOffset")}}, {{SVGElement("feImage")}}, {{SVGElement("feTile")}} und {{SVGElement("feFlood")}}, sondern gilt stattdessen für die verschiedenen Filtereffektelemente (z.B. {{SVGElement('feBlend')}}); siehe die SVG-{{SVGAttr('color-interpolation-filters')}}-Seite für eine vollständige Liste.
 
 > [!NOTE]
-> Es ist wichtig zu beachten, dass das SVG-Attribut {{SVGAttr('color-interpolation')}} einen Anfangswert von `sRGB` hat, während `color-interpolation-filters` einen Anfangswert von `linearRGB` hat. Das bedeutet, dass im Standardfall Filtereffekt-Interpolationen in einem anderen Farbraum stattfinden als alle anderen Farbinterpolationen.
+> Es ist wichtig zu beachten, dass das SVG-Attribut {{SVGAttr('color-interpolation')}} einen Anfangswert von `sRGB` hat, während `color-interpolation-filters` einen Anfangswert von `linearRGB` hat. Das bedeutet, dass im Standardfall Filtereffektinterpolationen in einem anderen Farbraum stattfinden als alle anderen Farbinterpolationen.
 
 ## Syntax
 
@@ -33,11 +33,11 @@ color-interpolation-filters: unset;
 ### Werte
 
 - `linearRGB`
-  - : Gibt an, dass die Farbinterpolation im linearen RGB-Farbraum erfolgen soll, wie in der [sRGB-Spezifikation](https://webstore.iec.ch/en/publication/6169) beschrieben. Dies ist der Standardwert der Eigenschaft.
+  - : Gibt an, dass die Farbintepolation im linearisierten RGB-Farbraum erfolgen sollte, wie in der [sRGB-Spezifikation](https://webstore.iec.ch/en/publication/6169) beschrieben. Dies ist der Standardwert der Eigenschaft.
 - `sRGB`
-  - : Gibt an, dass die Farbinterpolation im gammakodierten sRGB-Farbraum erfolgen soll.
+  - : Gibt an, dass die Farbintepolation im gamma-kodierten sRGB-Farbraum erfolgen sollte.
 - `auto`
-  - : Gibt an, dass der Benutzeragent entweder die `sRGB`- oder `linearRGB`-Räume für die Farbinterpolation wählen kann. Diese Option zeigt an, dass der Autor nicht verlangt, dass die Farbinterpolation in einem bestimmten Farbraum erfolgt.
+  - : Gibt an, dass der Benutzeragent entweder die `sRGB`- oder `linearRGB`-Räume für die Farbintepolation wählen kann. Diese Option zeigt an, dass der Autor nicht verlangt, dass die Farbintepolation in einem bestimmten Farbraum erfolgt.
 
 ## Formale Definition
 
@@ -57,6 +57,6 @@ color-interpolation-filters: unset;
 
 ## Siehe auch
 
-- SVG {{SVGAttr("color-interpolation-filters")}} Attribut
-- SVG {{SVGAttr("color-interpolation")}} Attribut
+- {{cssxref("color-interpolation")}}
+- SVG-Attribut {{SVGAttr("color-interpolation-filters")}}
 - [sRGB-Spezifikation](https://webstore.iec.ch/en/publication/6169)
diff --git a/files/de/web/css/color-interpolation/index.md b/files/de/web/css/color-interpolation/index.md
index e0c7b103d..774e2c3c9 100644
--- a/files/de/web/css/color-interpolation/index.md
+++ b/files/de/web/css/color-interpolation/index.md
@@ -2,12 +2,12 @@
 title: color-interpolation
 slug: Web/CSS/color-interpolation
 l10n:
-  sourceCommit: 4ecbac9e89961a132c1e7f5493ec94f60dcb1ee4
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die CSS-Eigenschaft `color-interpolation` wird in SVG verwendet, um anzugeben, welcher Farbraum für {{SVGElement("linearGradient")}} und {{SVGElement("radialGradient")}} SVG-Elemente verwendet werden soll.
+Die CSS-Eigenschaft `color-interpolation` wird in SVG verwendet, um anzugeben, welcher Farbraum für die SVG-Elemente {{SVGElement("linearGradient")}} und {{SVGElement("radialGradient")}} verwendet werden soll.
 
 ## Syntax
 
@@ -21,12 +21,12 @@ color-interpolation: linearRGB;
 ### Werte
 
 - `auto`
-  - : Gibt an, dass der User-Agent entweder den `sRGB`- oder den `linearRGB`-Farbraum für die Farbinterpolation auswählen kann. Diese Option zeigt an, dass der Autor nicht verlangt, dass die Farbinterpolation in einem bestimmten Farbraum erfolgt.
+  - : Gibt an, dass der Benutzeragent entweder die Farbräume `sRGB` oder `linearRGB` für die Farbinterpolation wählen kann. Diese Option zeigt an, dass der Autor nicht erfordert, dass die Farbinterpolation in einem bestimmten Farbraum erfolgt.
 - `sRGB`
   - : Gibt an, dass die Farbinterpolation im sRGB-Farbraum erfolgen soll.
-    Standardwert, falls keine `color-interpolation`-Eigenschaft festgelegt ist.
+    Dies ist der Standardwert, wenn keine `color-interpolation`-Eigenschaft festgelegt ist.
 - `linearRGB`
-  - : Gibt an, dass die Farbinterpolation im linearen RGB-Farbraum erfolgen soll, wie in der [sRGB-Spezifikation](https://webstore.iec.ch/en/publication/6169) beschrieben.
+  - : Gibt an, dass die Farbinterpolation im linearisierten RGB-Farbraum erfolgen soll, wie in [der sRGB-Spezifikation](https://webstore.iec.ch/en/publication/6169) beschrieben.
 
 ## Formale Definition
 
@@ -37,7 +37,7 @@ color-interpolation: linearRGB;
       <td><code>auto</code> | <code>sRGB</code> | <code>linearRGB</code></td>
     </tr>
     <tr>
-      <th scope="row">Anwendbar auf</th>
+      <th scope="row">Gilt für</th>
       <td>{{SVGElement("linearGradient")}} und {{SVGElement("radialGradient")}}</td>
     </tr>
     <tr>
@@ -57,7 +57,8 @@ color-interpolation: linearRGB;
 
 ## Beispiel
 
-Im ersten SVG ist die `color-interpolation`-Eigenschaft nicht im `<linearGradient>`-Element enthalten und die Farbinterpolation erfolgt standardmäßig im `sRGB`. Das zweite Beispiel zeigt die Farbinterpolation mit dem `linearRGB`-Wert.
+Im ersten SVG ist die Eigenschaft `color-interpolation` nicht auf dem `<linearGradient>`-Element enthalten und die Farbinterpolation erfolgt standardmäßig in `sRGB`.
+Das zweite Beispiel zeigt die Farbinterpolation mit dem Wert `linearRGB`.
 
 ```html
 <svg width="450" height="70">
@@ -127,4 +128,4 @@ svg {
 
 - {{SVGElement("linearGradient")}}
 - {{SVGElement("radialGradient")}}
-- {{SVGAttr("color-interpolation")}}
+- SVG-Attribut {{SVGAttr("color-interpolation")}}
diff --git a/files/de/web/css/color/index.md b/files/de/web/css/color/index.md
index 990900708..40cf3f421 100644
--- a/files/de/web/css/color/index.md
+++ b/files/de/web/css/color/index.md
@@ -2,16 +2,16 @@
 title: color
 slug: Web/CSS/color
 l10n:
-  sourceCommit: 729754108952e0bac9fb6268fcdf24a63b3cbbf3
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`color`** [CSS](/de/docs/Web/CSS) Eigenschaft legt die Vordergrund-[Farbe](/de/docs/Web/CSS/color_value) eines Textelements und [Textdekorationen](/de/docs/Web/CSS/text-decoration) fest und setzt den [`currentcolor`](/de/docs/Web/CSS/color_value#currentcolor_keyword) Wert. `currentcolor` kann als indirekter Wert für _andere_ Eigenschaften verwendet werden und ist der Standard für andere Farbeigenschaften, wie z.B. {{cssxref("border-color")}}.
+Die **`color`**-Eigenschaft [CSS](/de/docs/Web/CSS) legt den Vordergrund-[Farbwert](/de/docs/Web/CSS/color_value) des Textes eines Elements und dessen [Textdekorationen](/de/docs/Web/CSS/text-decoration) fest und bestimmt den Wert von [`currentcolor`](/de/docs/Web/CSS/color_value#currentcolor_keyword). `currentcolor` kann als indirekter Wert für _andere_ Eigenschaften verwendet werden und ist der Standard für andere Farbeigenschaften, wie zum Beispiel {{cssxref("border-color")}}.
 
 {{EmbedInteractiveExample("pages/css/color.html")}}
 
-Für einen Überblick über die Verwendung von Farben in HTML siehe [Anwenden von Farben auf HTML-Elemente mit CSS](/de/docs/Web/CSS/CSS_colors/Applying_color).
+Für einen Überblick zur Verwendung von Farben in HTML sehen Sie [Anwenden von Farbe auf HTML-Elemente mit CSS](/de/docs/Web/CSS/CSS_colors/Applying_color).
 
 ## Syntax
 
@@ -64,26 +64,26 @@ color: revert-layer;
 color: unset;
 ```
 
-Die `color` Eigenschaft wird als ein einzelner {{cssxref("&lt;color&gt;")}} Wert angegeben.
+Die `color`-Eigenschaft wird als einzelner {{cssxref("&lt;color&gt;")}}-Wert angegeben.
 
-Beachten Sie, dass der Wert eine einheitliche Farbe sein muss. Es kann kein {{cssxref("&lt;gradient&gt;")}} sein, der tatsächlich ein Typ von {{cssxref("&lt;image&gt;")}} ist.
+Achten Sie darauf, dass der Wert eine einheitliche Farbe sein muss. Es kann nicht ein {{cssxref("&lt;gradient&gt;")}} sein, welches tatsächlich eine Art von {{cssxref("&lt;image&gt;")}} ist.
 
 ### Werte
 
 - {{cssxref("&lt;color&gt;")}}
-  - : Legt die Farbe der textuellen und dekorativen Teile des Elements fest.
+  - : Legt die Farbe der textlichen und dekorativen Teile des Elements fest.
 - [`currentcolor`](/de/docs/Web/CSS/color_value#currentcolor_keyword)
-  - : Setzt die Farbe auf den `color` Eigenschaftswert des Elements. Wird `currentcolor` jedoch als Wert von `color` festgelegt, wird er als `inherit` behandelt.
+  - : Setzt die Farbe auf den `color`-Eigenschaftswert des Elements. Wenn `currentcolor` jedoch als Wert von `color` gesetzt wird, wird es als `inherit` behandelt.
 
 ## Barrierefreiheit
 
-Es ist wichtig sicherzustellen, dass der Kontrast zwischen der Farbe des Textes und dem Hintergrund, auf dem der Text platziert ist, hoch genug ist, damit Personen mit Sehbehinderungen den Inhalt der Seite lesen können.
+Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Textes und dem Hintergrund, auf dem der Text steht, hoch genug ist, damit Menschen mit Sehschwächen den Inhalt der Seite lesen können.
 
-Das Farbkontrastverhältnis wird durch den Vergleich der Leuchtkraft der Text- und Hintergrundfarbwerte bestimmt. Um die aktuellen [Richtlinien für barrierefreie Webinhalte (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) zu erfüllen, ist ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für größere Texte wie Überschriften erforderlich. Großer Text ist definiert als ab 18,66px und [fett](/de/docs/Web/CSS/font-weight) oder größer oder 24px oder größer.
+Das Kontrastverhältnis von Farben wird bestimmt, indem man die Helligkeit der Text- und Hintergrundfarbwerte vergleicht. Um die aktuellen [Richtlinien zur barrierefreien Webinhalte (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) zu erfüllen, ist ein Verhältnis von 4.5:1 für Textinhalte und 3:1 für größeren Text, wie Überschriften, erforderlich. Als großer Text gelten 18.66px und [fett](/de/docs/Web/CSS/font-weight) oder größer, oder 24px oder größer.
 
-- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
-- [MDN Verstehen von WCAG, Erläuterungen zu Richtlinie 1.4](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [Verstehen von Erfolgskriterium 1.4.3 | W3C Verstehen von WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+- [WebAIM: Farbkontrast-Prüfer](https://webaim.org/resources/contrastchecker/)
+- [MDN Verständnis von WCAG, Richtlinie 1.4 Erklärungen](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Verstehen des Erfolgskriteriums 1.4.3 | W3C Verständnis WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 
 ## Formale Definition
 
@@ -97,7 +97,7 @@ Das Farbkontrastverhältnis wird durch den Vergleich der Leuchtkraft der Text- u
 
 ### Text rot machen
 
-Folgende Möglichkeiten bestehen, um den Text eines Absatzes rot zu färben:
+Dies sind alles Möglichkeiten, den Text eines Absatzes rot zu machen:
 
 ```css
 p {
@@ -143,5 +143,6 @@ p {
 
 - Der {{cssxref("&lt;color&gt;")}} Datentyp
 - Andere farbbezogene Eigenschaften: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, und {{cssxref("print-color-adjust")}}
-- [Anwenden von Farben auf HTML-Elemente mit CSS](/de/docs/Web/CSS/CSS_colors/Applying_color)
+- SVG {{SVGAttr("color")}} Attribut
+- [Anwenden von Farbe auf HTML-Elemente mit CSS](/de/docs/Web/CSS/CSS_colors/Applying_color)
 - [WCAG: Farbkontrast](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)
diff --git a/files/de/web/css/content-visibility/index.md b/files/de/web/css/content-visibility/index.md
index 5863cf8a5..c90d707a8 100644
--- a/files/de/web/css/content-visibility/index.md
+++ b/files/de/web/css/content-visibility/index.md
@@ -2,15 +2,15 @@
 title: content-visibility
 slug: Web/CSS/content-visibility
 l10n:
-  sourceCommit: b60bc79c7ad36c56dddf6760d2fd4dbb642d2023
+  sourceCommit: 5c1847fabca3f8f0fa6cd5e6c89b1a5a1de314e6
 ---
 
 {{CSSRef}}
 
-Die **`content-visibility`** [CSS](/de/docs/Web/CSS)-Eigenschaft kontrolliert, ob der Inhalt eines Elements überhaupt gerendert wird. Sie erzwingt zudem eine starke Gruppe von Containments, sodass User Agents große Teile der Layout- und Rendering-Arbeit potenziell auslassen können, bis sie benötigt werden. Dadurch kann der User Agent die Rendering-Arbeit eines Elements (einschließlich Layout und Painting) überspringen, bis sie benötigt wird – was den initialen Seitenaufbau wesentlich beschleunigt.
+Die **`content-visibility`** [CSS](/de/docs/Web/CSS)-Eigenschaft steuert, ob ein Element seine Inhalte überhaupt rendert, und erzwingt eine starke Reihe von Einschränkungen, die es Benutzeragenten ermöglichen, große Bereiche von Layout- und Rendering-Arbeiten potenziell zu überspringen, bis sie benötigt werden. Sie ermöglicht dem Benutzeragenten, die Rendering-Arbeit eines Elements (einschließlich Layout und Malen) zu überspringen, bis sie benötigt wird – was das anfängliche Laden der Seite erheblich beschleunigt.
 
 > [!NOTE]
-> Das Ereignis [`contentvisibilityautostatechange`](/de/docs/Web/API/Element/contentvisibilityautostatechange_event) wird bei jedem Element gefeuert, bei dem `content-visibility: auto` eingestellt ist, wenn die Rendering-Arbeit beginnt oder aufhört, übersprungen zu werden. Dies bietet eine bequeme Möglichkeit für den Code einer App, Renderprozesse zu beginnen oder zu stoppen (z.B. das Zeichnen auf einem {{htmlelement("canvas")}}), wenn sie nicht benötigt werden, und so die Rechenleistung zu schonen.
+> Das [`contentvisibilityautostatechange`](/de/docs/Web/API/Element/contentvisibilityautostatechange_event)-Ereignis wird bei jedem Element mit `content-visibility: auto` ausgelöst, wenn dessen Rendering-Arbeit beginnt oder aufhört, übersprungen zu werden. Dies bietet eine bequeme Möglichkeit für den Code einer App, Renderprozesse zu starten oder zu stoppen (z. B. Zeichnen auf einem {{htmlelement("canvas")}}), wenn sie nicht benötigt werden, und so Rechenleistung zu sparen.
 
 {{EmbedInteractiveExample("pages/css/content-visibility.html")}}
 
@@ -33,29 +33,29 @@ content-visibility: unset;
 ### Werte
 
 - `visible`
-  - : Keine Wirkung. Der Inhalt des Elements wird normal ausgelegt und gerendert.
+  - : Keine Auswirkung. Die Inhalte des Elements werden normal gelayoutet und gerendert.
 - `hidden`
-  - : Das Element [überspringt seinen Inhalt](/de/docs/Web/CSS/CSS_containment/Using_CSS_containment#skips_its_contents). Der übersprungene Inhalt darf nicht für Benutzer-Agent-Funktionen zugänglich sein, wie z.B. Seitensuche, Tab-Navigation etc., und darf nicht auswählbar oder fokussierbar sein. Dies ähnelt dem Verhalten von `display: none`.
+  - : Das Element [überspringt seine Inhalte](/de/docs/Web/CSS/CSS_containment/Using_CSS_containment#skips_its_contents). Die übersprungenen Inhalte dürfen für Funktionen des Benutzeragenten wie Suchen auf der Seite, Tab-Navigation usw. nicht zugänglich sein, noch dürfen sie auswählbar oder fokussierbar sein. Dies ist ähnlich wie das Zuordnen der Inhalte mit `display: none`.
 - `auto`
-  - : Das Element aktiviert Layout-Containment, Style-Containment und Paint-Containment. Wenn das Element nicht [benutzerspezifisch relevant](/de/docs/Web/CSS/CSS_containment/Using_CSS_containment#relevant_to_the_user) ist, wird auch dessen Inhalt übersprungen. Im Gegensatz zu `hidden` muss der übersprungene Inhalt jedoch normal für Benutzer-Agent-Funktionen zugänglich sein, wie z.B. Seitensuche, Tab-Navigation etc., und muss fokussierbar und auswählbar sein.
+  - : Das Element aktiviert Layout-Kontainment, Stil-Kontainment und Mal-Kontainment. Wenn das Element nicht [relevant für den Benutzer](/de/docs/Web/CSS/CSS_containment/Using_CSS_containment#relevant_to_the_user) ist, überspringt es auch seine Inhalte. Im Gegensatz zu `hidden` müssen die übersprungenen Inhalte jedoch für Funktionen des Benutzeragenten wie Suchen auf der Seite, Tab-Navigation usw. normal verfügbar sein und müssen fokussierbar und auswählbar sein wie gewohnt.
 
 ## Beschreibung
 
-### Animation und Transition von content-visibility
+### Animieren und Übergänge von `content-visibility`
 
-[Unterstützende Browser](#browser-kompatibilität) animieren/transitionieren `content-visibility` mit einer Variation des [diskreten Animationstyps](/de/docs/Web/CSS/CSS_animated_properties#discrete).
+[Unterstützende Browser](#browser-kompatibilität) animieren/transitionieren `content-visibility` mit einer Variante des [diskreten Animationstyps](/de/docs/Web/CSS/CSS_animated_properties#discrete).
 
-Diskrete Animation bedeutet im Allgemeinen, dass die Eigenschaft während der Hälfte der Animation zwischen zwei Werten umschaltet. Bei `content-visibility` schaltet der Browser jedoch zwischen den beiden Werten, um den animierten Inhalt während der gesamten Animationsdauer anzuzeigen. Beispiel:
+Diskrete Animation bedeutet im Allgemeinen, dass die Eigenschaft 50% der Animationszeit zwischen zwei Werten wechselt. Im Fall von `content-visibility` wechselt der Browser jedoch zwischen den beiden Werten, um den animierten Inhalt während der gesamten Animationsdauer anzuzeigen. Zum Beispiel:
 
-- Bei der Animation von `content-visibility` von `hidden` zu `visible` schaltet der Wert bei `0%` der Animationsdauer zu `visible`, sodass es die ganze Zeit sichtbar ist.
-- Bei der Animation von `content-visibility` von `visible` zu `hidden` schaltet der Wert bei `100%` der Animationsdauer zu `hidden`, sodass es die ganze Zeit sichtbar ist.
+- Beim Animieren von `content-visibility` von `hidden` zu `visible` wird der Wert bei `0%` der Animationsdauer auf `visible` gesetzt, sodass er während der gesamten Dauer sichtbar ist.
+- Beim Animieren von `content-visibility` von `visible` zu `hidden` wird der Wert bei `100%` der Animationsdauer auf `hidden` gesetzt, sodass er während der gesamten Dauer sichtbar ist.
 
-Dieses Verhalten ist nützlich, um Ein-/Ausgangsanimationen zu erstellen, bei denen Sie z.B. Inhalte mit `content-visibility: hidden` aus dem DOM entfernen möchten, aber eine sanfte Transition (wie ein Ausblenden) wünschen, anstatt dass dieser sofort verschwindet.
+Dieses Verhalten ist nützlich für das Erstellen von Ein- und Ausstiegsanimationen, bei denen Sie beispielsweise Inhalte mit `content-visibility: hidden` aus dem DOM entfernen möchten, dabei aber einen sanften Übergang (wie z. B. ein Ausblenden) wünschen, statt sie sofort verschwinden zu lassen.
 
-Wenn `content-visibility` mit [CSS-Transitions](/de/docs/Web/CSS/CSS_transitions) animiert wird, muss [`transition-behavior: allow-discrete`](/de/docs/Web/CSS/transition-behavior) auf `content-visibility` gesetzt werden. Dies ermöglicht effektiv `content-visibility`-Transitions.
+Beim Animieren von `content-visibility` mit [CSS-Übergängen](/de/docs/Web/CSS/CSS_transitions) muss [`transition-behavior: allow-discrete`](/de/docs/Web/CSS/transition-behavior) auf `content-visibility` gesetzt werden. Dadurch werden `content-visibility`-Übergänge effektiv aktiviert.
 
 > [!NOTE]
-> Beim Übergang des `content-visibility`-Werts eines Elements müssen Sie keinen Satz von Startwerten für transitionierte Eigenschaften mithilfe eines [`@starting-style`](/de/docs/Web/CSS/@starting-style)-Blocks angeben, wie Sie es beim [Übergang von `display`](/de/docs/Web/CSS/display#animating_display) tun. Dies liegt daran, dass `content-visibility` ein Element nicht wie `display` aus dem DOM verbirgt: Es überspringt einfach das Rendern des Inhalts des Elements.
+> Beim Übergang eines Elements von `content-visibility` müssen Sie keine Anfangswerte für übergehende Eigenschaften mithilfe eines [`@starting-style`](/de/docs/Web/CSS/@starting-style)-Blocks angeben, wie Sie es bei der [Transition von `display`](/de/docs/Web/CSS/display#animating_display) tun. Dies liegt daran, dass `content-visibility` ein Element nicht wie `display` aus dem DOM verbirgt: Es überspringt lediglich das Rendern der Inhalte des Elements.
 
 ## Formale Definition
 
@@ -67,17 +67,17 @@ Wenn `content-visibility` mit [CSS-Transitions](/de/docs/Web/CSS/CSS_transitions
 
 ## Barrierefreiheit
 
-Inhalte außerhalb des Bildschirms innerhalb einer Eigenschaft `content-visibility: auto` bleiben im Dokumentobjektmodell und im Accessibility-Tree. Dies ermöglicht eine Verbesserung der Seitenleistung mit `content-visibility: auto`, ohne die Barrierefreiheit negativ zu beeinflussen.
+Außerhalb des Bildschirms befindliche Inhalte innerhalb einer `content-visibility: auto`-Eigenschaft bleiben im Document Object Model und im Barrierefreiheitsbaum erhalten. Dies ermöglicht eine Verbesserung der Seitenleistung mit `content-visibility: auto`, ohne die Barrierefreiheit negativ zu beeinflussen.
 
-Da Stile für Inhalte außerhalb des Bildschirms nicht gerendert werden, _erscheinen Elemente, die absichtlich mit `display: none` oder `visibility: hidden` versteckt werden, dennoch im Accessibility-Tree_.
-Wenn Sie nicht möchten, dass ein Element im Accessibility-Tree erscheint, verwenden Sie `aria-hidden="true"`.
+Da Stile für außerhalb des Bildschirms befindliche Inhalte nicht gerendert werden, werden absichtlich mit `display: none` oder `visibility: hidden` verborgene Elemente _trotzdem im Barrierefreiheitsbaum erscheinen_.
+Wenn Sie nicht möchten, dass ein Element im Barrierefreiheitsbaum erscheint, verwenden Sie `aria-hidden="true"`.
 
 ## Beispiele
 
-### Verwendung von auto zur Reduzierung der Rendering-Kosten langer Seiten
+### Verwendung von auto, um die Rendering-Kosten langer Seiten zu reduzieren
 
-Das folgende Beispiel zeigt die Verwendung von `content-visibility: auto`, um das Painting und Rendering von Bereichen außerhalb des Bildschirms zu überspringen.
-Wenn sich ein `section` außerhalb des Ansichtsfensters befindet, wird das Painting des Inhalts übersprungen, bis sich der Bereich dem Ansichtsfenster nähert. Dies hilft sowohl bei der Ladezeit als auch bei Interaktionen auf der Seite.
+Das folgende Beispiel zeigt die Verwendung von `content-visibility: auto`, um das Malen und Rendern von Abschnitten außerhalb des Bildschirms zu überspringen.
+Wenn ein `section` außerhalb des Viewports ist, wird das Malen des Inhalts übersprungen, bis der Abschnitt in die Nähe des Viewports kommt. Dies hilft sowohl beim Laden als auch bei Interaktionen auf der Seite.
 
 #### HTML
 
@@ -96,7 +96,7 @@ Wenn sich ein `section` außerhalb des Ansichtsfensters befindet, wird das Paint
 
 #### CSS
 
-Die Eigenschaft `contain-intrinsic-size` fügt jedem `section`-Element eine Standardgröße von 500px in Höhe und Breite hinzu. Nachdem ein Abschnitt gerendert wurde, behält er seine gerenderte intrinsische Größe bei, auch wenn er aus dem Ansichtsfenster herausgescrollt wird.
+Die `contain-intrinsic-size`-Eigenschaft fügt jedem `section`-Element eine Standardgröße von 500px in Höhe und Breite hinzu. Nachdem ein Abschnitt gerendert wurde, behält er seine gerenderte intrinsische Größe bei, selbst wenn er aus dem Viewport herausgescrollt wird.
 
 ```css
 section {
@@ -107,8 +107,8 @@ section {
 
 ### Verwendung von hidden zur Verwaltung der Sichtbarkeit
 
-Das folgende Beispiel zeigt, wie die Sichtbarkeit von Inhalten mit JavaScript verwaltet werden kann.
-Die Verwendung von `content-visibility: hidden;` anstelle von `display: none;` bewahrt den Rendering-Zustand von Inhalten, wenn sie versteckt sind, und sorgt für schnelleres Rendering.
+Das folgende Beispiel zeigt, wie die Inhaltsichtbarkeit mit JavaScript verwaltet werden kann.
+Die Verwendung von `content-visibility: hidden;` anstelle von `display: none;` bewahrt den Rendering-Zustand von Inhalten, wenn sie verborgen sind, und das Rendering erfolgt schneller.
 
 #### HTML
 
@@ -129,9 +129,9 @@ Die Verwendung von `content-visibility: hidden;` anstelle von `display: none;` b
 
 #### CSS
 
-Die Eigenschaft `content-visibility` wird auf Absätzen eingestellt, die direkte Kinder von Elementen mit den Klassen `visible` und `hidden` sind. In unserem Beispiel können wir Inhalte in Absätzen abhängig von der CSS-Klasse der übergeordneten div-Elemente ein- und ausblenden.
+Die `content-visibility`-Eigenschaft wird auf Absätzen gesetzt, die direkte Kinder von Elementen mit den Klassen `visible` und `hidden` sind. In unserem Beispiel können wir Inhalte in Absätzen je nach CSS-Klasse der übergeordneten Div-Elemente anzeigen und ausblenden.
 
-Die Eigenschaft `contain-intrinsic-size` ist enthalten, um die Inhaltsgröße darzustellen. Dies hilft dabei, Layoutverschiebungen zu reduzieren, wenn der Inhalt ausgeblendet wird.
+Die `contain-intrinsic-size`-Eigenschaft ist enthalten, um die Inhaltsgröße darzustellen. Dies hilft, Layout-Verschiebungen zu reduzieren, wenn Inhalte verborgen werden.
 
 ```css
 p {
@@ -166,11 +166,11 @@ document.querySelectorAll("button.toggle").forEach((button) => {
 
 #### Ergebnis
 
-{{EmbedLiveSample('Using hidden to manually manage visibility')}}
+{{ EmbedLiveSample('Using hidden to manually manage visibility') }}
 
-### Animation von content-visibility
+### Animieren von content-visibility
 
-In diesem Beispiel haben wir ein {{htmlelement("div")}}-Element, dessen Inhalt durch Klicken oder Drücken einer Taste zwischen sichtbar und verborgen umgeschaltet werden kann.
+In diesem Beispiel haben wir ein {{htmlelement("div")}}-Element, dessen Inhalt durch Klicken oder Drücken einer Taste zwischen sichtbarer und verborgener Darstellung umgeschaltet werden kann.
 
 #### HTML
 
@@ -190,7 +190,7 @@ In diesem Beispiel haben wir ein {{htmlelement("div")}}-Element, dessen Inhalt d
 
 #### CSS
 
-Im CSS setzen wir initial `content-visibility: hidden;` auf das `<div>`, um dessen Inhalt zu verbergen. Dann richten wir `@keyframe`-Animationen ein und verknüpfen sie mit Klassen, um das `<div>` anzuzeigen und zu verbergen, wobei `content-visibility` und [`color`](/de/docs/Web/CSS/color) animiert werden, sodass ein sanfter Animationseffekt entsteht, wenn der Inhalt angezeigt/versteckt wird.
+Im CSS setzen wir zunächst `content-visibility: hidden;` auf das `<div>`, um dessen Inhalt zu verbergen. Dann richten wir `@keyframe`-Animationen ein und hängen sie an Klassen an, um das `<div>` zu zeigen und zu verbergen, wobei `content-visibility` und [`color`](/de/docs/Web/CSS/color) animiert werden, sodass Sie einen glatten Animationseffekt erhalten, wenn der Inhalt gezeigt/verborgen wird.
 
 ```css
 div {
@@ -242,7 +242,7 @@ div {
 
 #### JavaScript
 
-Schließlich verwenden wir JavaScript, um die `.show`- und `.hide`-Klassen auf das `<div>` anzuwenden, um die Animationen entsprechend anzuwenden, wenn es zwischen sichtbaren und verborgenen Zuständen umgeschaltet wird.
+Schließlich verwenden wir JavaScript, um die `.show`- und `.hide`-Klassen auf das `<div>` anzuwenden und so die Animationen anzuwenden, während es zwischen sichtbaren und verborgenen Zuständen umgeschaltet wird.
 
 ```js
 const divElem = document.querySelector("div");
@@ -252,7 +252,7 @@ htmlElem.addEventListener("click", showHide);
 document.addEventListener("keydown", showHide);
 
 function showHide() {
-  if (divElem.classList[0] === "show") {
+  if (divElem.classList.contains("show")) {
     divElem.classList.remove("show");
     divElem.classList.add("hide");
   } else {
@@ -266,7 +266,7 @@ function showHide() {
 
 Das gerenderte Ergebnis sieht folgendermaßen aus:
 
-{{EmbedLiveSample("Animating content-visibility", "100%", "300")}}
+{{ EmbedLiveSample("Animating content-visibility", "100%", "300") }}
 
 ## Spezifikationen
 
diff --git a/files/de/web/css/cursor/index.md b/files/de/web/css/cursor/index.md
index 8e7ffef00..0e5590e16 100644
--- a/files/de/web/css/cursor/index.md
+++ b/files/de/web/css/cursor/index.md
@@ -2,14 +2,14 @@
 title: cursor
 slug: Web/CSS/cursor
 l10n:
-  sourceCommit: 5bd9fe2b25c6eee2a14d0406ce7116998fa48c13
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`cursor`**-Eigenschaft von [CSS](/de/docs/Web/CSS) legt den Mauscursor fest, der angezeigt werden soll, wenn der Mauszeiger über ein Element fährt.
+Die **`cursor`**-Eigenschaft von [CSS](/de/docs/Web/CSS) legt den Mauszeiger fest, der angezeigt wird, wenn der Mauszeiger über ein Element geführt wird.
 
-Die Cursor-Einstellung sollte die Benutzer über die Mausaktionen informieren, die an der aktuellen Position durchgeführt werden können, einschließlich: Textauswahl, Aktivierung von Hilfe- oder Kontextmenüs, Kopieren von Inhalten, Anpassen der Größe von Tabellen und so weiter. Sie können entweder den _Typ_ des Cursors mit einem Schlüsselwort angeben oder ein spezifisches Symbol laden, das verwendet werden soll (mit optionalen Fallback-Bildern und einem obligatorischen Schlüsselwort als endgültigem Fallback).
+Die Cursor-Einstellung sollte Benutzer über die Mausoperationen informieren, die an der aktuellen Position ausgeführt werden können, einschließlich: Textauswahl, Hilfe oder Kontextmenüs aktivieren, Inhalte kopieren, Tabellen neu dimensionieren usw. Sie können entweder den _Typ_ des Cursors mit einem Schlüsselwort angeben oder ein bestimmtes Symbol laden, das verwendet werden soll (mit optionalen Fallback-Bildern und einem obligatorischen Schlüsselwort als endgültigem Fallback).
 
 {{EmbedInteractiveExample("pages/css/cursor.html")}}
 
@@ -48,25 +48,25 @@ cursor: revert-layer;
 cursor: unset;
 ```
 
-Die `cursor`-Eigenschaft wird als null oder mehr `<url>`-Werte angegeben, getrennt durch Kommas, gefolgt von einem einzelnen obligatorischen Schlüsselwortwert. Jede `<url>` sollte auf eine Bilddatei verweisen. Der Browser versucht, das erste angegebene Bild zu laden, fällt zurück auf das nächste, wenn dies nicht möglich ist, und verwendet den Schlüsselwortwert als Fallback, wenn keine Bilder geladen werden konnten (oder keine angegeben wurden).
+Die `cursor`-Eigenschaft wird als null oder mehr `<url>`-Werte angegeben, die durch Kommata getrennt werden, gefolgt von einem einzelnen obligatorischen Schlüsselwortwert. Jede `<url>` sollte auf eine Bilddatei verweisen. Der Browser wird versuchen, das erste angegebene Bild zu laden und fällt auf das nächste zurück, wenn es nicht geladen werden kann, und verwendet den Schlüsselwortwert als Fallback, wenn keine Bilder geladen werden konnten (oder keine angegeben wurden).
 
-Jede `<url>` kann optional von einem Paar durch Leerzeichen getrennten Zahlen gefolgt werden, die die `<x>`- und `<y>`-Koordinaten des Cursors-Hotspots relativ zur oberen linken Ecke des Bildes festlegen.
+Jede `<url>` kann optional von einem Paar durch Leerzeichen getrennten Zahlen gefolgt werden, die die `<x>`- und `<y>`-Koordinaten des Hotspots des Cursors relativ zur oberen linken Ecke des Bildes festlegen.
 
 ### Werte
 
 - `<url>` {{optional_inline}}
-  - : Ein `url()` oder eine durch Kommas getrennte Liste `url(), url(), …`, die auf eine Bilddatei verweist. Mehr als ein {{cssxref("url_value", "&lt;url&gt;")}} kann als Fallback angegeben werden, falls einige Cursorbildtypen nicht unterstützt werden. Ein nicht-URL-Fallback (einer oder mehrere der Schlüsselwortwerte) _muss_ am Ende der Fallback-Liste stehen.
+  - : Ein `url()` oder eine durch Kommata getrennte Liste `url(), url(), …`, die auf eine Bilddatei verweisen. Mehr als eine {{cssxref("url_value", "&lt;url&gt;")}} kann als Fallback bereitgestellt werden, falls einige Cursorbildtypen nicht unterstützt werden. Ein Nicht-URL-Fallback (einer oder mehrere der Schlüsselwert-Bedingungen) _muss_ am Ende der Fallback-Liste stehen.
 - `<x>`, `<y>` {{optional_inline}}
 
-  - : Optionale x- und y-Koordinaten, die den Cursor-Hotspot angeben; die genaue Position innerhalb des Cursors, auf die gezeigt wird.
+  - : Optionale x- und y-Koordinaten, die den Cursor-Hotspot angeben; die genaue Position innerhalb des Cursors, die angezeigt wird.
 
-    Die Zahlen sind in Einheiten von Bildpixeln. Sie sind relativ zur oberen linken Ecke des Bildes, die `0 0` entspricht, und sind innerhalb der Grenzen des Cursors-Bildes eingeschränkt. Wenn diese Werte nicht angegeben sind, können sie aus der Datei selbst gelesen werden und sind andernfalls standardmäßig in der oberen linken Ecke des Bildes.
+    Die Zahlen sind in Einheiten von Bildpixeln. Sie sind relativ zur oberen linken Ecke des Bildes, die `0 0` entspricht, und werden innerhalb der Grenzen des Cursorbildes eingegrenzt. Wenn diese Werte nicht angegeben sind, können sie aus der Datei selbst gelesen werden und andernfalls standardmäßig auf die obere linke Ecke des Bildes festgelegt werden.
 
 - `keyword`
 
-  - : Ein Schlüsselwert _muss_ angegeben werden, der entweder den zu verwendenden Cursor-Typ oder den Fallback-Cursor angibt, falls alle angegebenen Symbole nicht geladen werden können.
+  - : Ein Schlüsselwortwert _muss_ angegeben werden und zeigt entweder den zu verwendenden Cursor-Typ an oder den Fallback-Cursor, der verwendet werden soll, wenn alle angegebenen Symbole nicht geladen werden können.
 
-    Die verfügbaren Schlüsselwörter sind in der folgenden Tabelle aufgeführt. Andere als `none`, was keinen Cursor bedeutet, gibt es ein Bild, das zeigt, wie die Cursor früher gerendert wurden. Sie können mit Ihrer Maus über die Tabellenreihen fahren, um den Effekt der verschiedenen Cursor-Schlüsselwortwerte in Ihrem Browser heute zu sehen.
+    Die verfügbaren Schlüsselwörter sind in der folgenden Tabelle aufgeführt. Mit Ausnahme von `none`, was bedeutet, dass kein Cursor angezeigt wird, gibt es ein Bild, das zeigt, wie die Cursor früher gerendert wurden. Sie können Ihre Maus über die Tabellenzeilen bewegen, um den Effekt der verschiedenen Cursor-Schlüsselwortwerte in Ihrem Browser zu sehen.
 
     <table class="standard-table">
       <thead>
@@ -82,54 +82,63 @@ Jede `<url>` kann optional von einem Paar durch Leerzeichen getrennten Zahlen ge
           <th rowspan="3" scope="row">Allgemein</th>
           <td><code>auto</code></td>
           <td></td>
-          <td>Das UA bestimmt den anzuzeigenden Cursor basierend auf dem aktuellen Kontext. Z. B. äquivalent zu <code>text</code>, wenn über Text gefahren wird.</td>
+          <td>
+            Der UA wird den anzuzeigenden Cursor basierend auf dem aktuellen Kontext bestimmen. Z.B. äquivalent zu <code>text</code> beim Schweben über Text.
+          </td>
         </tr>
         <tr style="cursor: default">
           <td><code>default</code></td>
-          <td><img src="default.gif" alt="breiter Pfeil, der nach oben und nach links zeigt" /></td>
-          <td>Der plattformabhängige Standard-Cursor. Typischerweise ein Pfeil.</td>
+          <td><img src="default.gif" alt="breiter Pfeil, der nach oben und links zeigt" /></td>
+          <td>Der plattformabhängige Standardcursor. Typischerweise ein Pfeil.</td>
         </tr>
         <tr style="cursor: none">
           <td><code>none</code></td>
           <td></td>
-          <td>Es wird kein Cursor angezeigt.</td>
+          <td>Es wird kein Cursor gerendert.</td>
         </tr>
         <tr style="cursor: context-menu">
-          <th rowspan="5" scope="row" style="cursor: auto">Links &amp; Status</th>
+          <th rowspan="5" scope="row" style="cursor: auto">Links &#x26; Status</th>
           <td><code>context-menu</code></td>
-          <td><img alt="breiter Pfeil, der nach oben und nach links zeigt und ein Menü-Symbol leicht verdeckt" src="context-menu.png" /></td>
+          <td><img alt="breiter Pfeil zeigt nach oben und links, der ein Menü-Symbol leicht verdeckt" src="context-menu.png" /></td>
           <td>Ein Kontextmenü ist verfügbar.</td>
         </tr>
         <tr style="cursor: help">
           <td><code>help</code></td>
-          <td><img src="help.gif" alt="breiter Pfeil, der nach oben und nach links zeigt, neben einem Fragezeichen" /></td>
-          <td>Hilfeinformationen sind verfügbar.</td>
+          <td><img src="help.gif" alt="breiter Pfeil zeigt nach oben und links neben einem Fragezeichen" /></td>
+          <td>Hilfsinformationen sind verfügbar.</td>
         </tr>
         <tr style="cursor: pointer">
           <td><code>pointer</code></td>
-          <td><img src="pointer.gif" alt="rechte Hand mit einem nach oben zeigenden Zeigefinger" /></td>
-          <td>Der Cursor ist ein Zeiger, der einen Link anzeigt. Typischerweise ein Bild einer zeigenden Hand.</td>
+          <td><img src="pointer.gif" alt="rechte Hand mit einem nach oben gerichteten Zeigefinger" /></td>
+          <td>
+            Der Cursor ist ein Zeiger, der auf einen Link hinweist. Typischerweise ein Bild einer zeigenden Hand.
+          </td>
         </tr>
         <tr style="cursor: progress">
           <td><code>progress</code></td>
           <td><img src="progress.gif" alt="breiter Pfeil und Sanduhr" /></td>
-          <td>Das Programm ist im Hintergrund beschäftigt, aber der Benutzer kann noch mit der Benutzeroberfläche interagieren (im Gegensatz zu <code>wait</code>).</td>
+          <td>
+            Das Programm ist im Hintergrund beschäftigt, aber der Benutzer kann noch mit der Schnittstelle interagieren (im Gegensatz zu <code>wait</code>).
+          </td>
         </tr>
         <tr style="cursor: wait">
           <td><code>wait</code></td>
           <td><img src="wait.gif" alt="Sanduhr" /></td>
-          <td>Das Programm ist beschäftigt, und der Benutzer kann nicht mit der Benutzeroberfläche interagieren (im Gegensatz zu <code>progress</code>). Manchmal ein Bild einer Sanduhr oder einer Uhr.</td>
+          <td>
+            Das Programm ist beschäftigt und der Benutzer kann nicht mit der Schnittstelle interagieren (im Gegensatz zu <code>progress</code>).
+            Manchmal ein Bild einer Sanduhr oder einer Uhr.
+          </td>
         </tr>
         <tr style="cursor: cell">
           <th rowspan="4" scope="row" style="cursor: auto">Auswahl</th>
           <td><code>cell</code></td>
-          <td><img src="cell.gif" alt="breites Pluszeichen" /></td>
+          <td><img src="cell.gif" alt="breites Plussymbol" /></td>
           <td>Die Tabellenzelle oder der Satz von Zellen kann ausgewählt werden.</td>
         </tr>
         <tr style="cursor: crosshair">
           <td><code>crosshair</code></td>
-          <td><img src="crosshair.gif" alt="Pluszeichen, bestehend aus zwei dünnen Linien." /></td>
-          <td>Kreuz-Cursor, häufig verwendet, um die Auswahl in einem Bitmap anzuzeigen.</td>
+          <td><img src="crosshair.gif" alt="Plussymbol bestehend aus zwei dünnen Linien." /></td>
+          <td>Kreuzcursor, oft verwendet, um eine Auswahl in einem Bitmap anzuzeigen.</td>
         </tr>
         <tr style="cursor: text">
           <td><code>text</code></td>
@@ -139,70 +148,76 @@ Jede `<url>` kann optional von einem Paar durch Leerzeichen getrennten Zahlen ge
         <tr style="cursor: vertical-text">
           <td><code>vertical-text</code></td>
           <td><img alt="horizontaler I-Balken" src="vertical-text.gif" /></td>
-          <td>Der vertikale Text kann ausgewählt werden. Typischerweise die Form eines seitwärts liegenden I-Balkens.</td>
+          <td>
+            Der vertikale Text kann ausgewählt werden. Typischerweise die Form eines seitwärts gerichteten I-Balkens.
+          </td>
         </tr>
         <tr style="cursor: alias">
           <th rowspan="7" scope="row" style="cursor: auto">Ziehen &amp; Ablegen</th>
           <td><code>alias</code></td>
-          <td><img src="alias.gif" alt="breiter Pfeil, der nach oben und nach links zeigt und teilweise ein kleineres Ordnersymbol mit einem nach oben und nach rechts zeigenden gebogenen Pfeil verdeckt"/></td>
-          <td>Ein Alias oder Verknüpfung soll erstellt werden.</td>
+          <td><img src="alias.gif" alt="breiter Pfeil zeigt nach oben und links und verdeckt teilweise ein kleineres Ordnersymbol mit einem gebogenen Pfeil, der nach oben und rechts zeigt"/></td>
+          <td>Ein Alias oder eine Verknüpfung soll erstellt werden.</td>
         </tr>
         <tr style="cursor: copy">
           <td><code>copy</code></td>
-          <td><img class="default" src="copy.gif" alt="breiter Pfeil, der nach oben und nach links zeigt und teilweise ein kleineres Ordnersymbol mit einem Pluszeichen verdeckt" /></td>
+          <td><img class="default" src="copy.gif" alt="breiter Pfeil zeigt nach oben und links und verdeckt teilweise ein kleineres Ordnersymbol mit einem Pluszeichen" /></td>
           <td>Etwas soll kopiert werden.</td>
         </tr>
         <tr style="cursor: move">
           <td><code>move</code></td>
-          <td><img src="move.gif" alt="Pluszeichen bestehend aus zwei dünnen Linien. Die vier Punkte sind kleine Pfeile, die nach außen zeigen" /></td>
-          <td>Etwas soll verschoben werden.</td>
+          <td><img src="move.gif" alt="Pluszeichen aus zwei dünnen Linien. Die vier Punkte sind kleine Pfeile, die nach außen zeigen" /></td>
+          <td>Etwas soll bewegt werden.</td>
         </tr>
         <tr style="cursor: no-drop">
           <td><code>no-drop</code></td>
           <td>
-            <img src="no-drop.gif" alt="Zeiger-Icon und ein Nicht erlaubt-Icon" />
+            <img src="no-drop.gif" alt="Zeigersymbol und ein Nicht-erlaubt-Symbol" />
           </td>
           <td>
-            Ein Element darf an der aktuellen Position nicht abgelegt werden.<br /><a href="https://bugzil.la/275173">Firefox-Bug 275173</a>: Unter Windows und macOS ist <code>no-drop</code> dasselbe wie <code>not-allowed</code>.
+            Ein Element darf nicht an der aktuellen Position abgelegt werden.<br /><a href="https://bugzil.la/275173">Firefox-Fehler 275173</a>:
+            Unter Windows und macOS ist <code>no-drop</code> dasselbe wie <code>not-allowed</code>.
           </td>
         </tr>
         <tr style="cursor: not-allowed">
           <td><code>not-allowed</code></td>
-          <td><img alt="Nicht erlaubtes Symbol, ein Kreis mit einem durchgezogenen Strich" src="not-allowed.gif" /></td>
-          <td>Die angeforderte Aktion wird nicht durchgeführt.</td>
+          <td><img alt="Nicht-erlaubt-Symbol, das ein Kreis mit einem durchgehenden Strich ist" src="not-allowed.gif" /></td>
+          <td>Die angeforderte Aktion wird nicht ausgeführt.</td>
         </tr>
         <tr style="cursor: grab">
           <td><code>grab</code></td>
-          <td><img class="default" src="grab.gif" alt="vollständig geöffnetes Hand-Icon" /></td>
-          <td>Etwas kann erfasst (zum Verschieben gezogen) werden.</td>
+          <td><img class="default" src="grab.gif" alt="vollständig geöffnetes Handsymbol" /></td>
+          <td>Etwas kann gegriffen (zum Bewegen gezogen) werden.</td>
         </tr>
         <tr style="cursor: grabbing">
           <td><code>grabbing</code></td>
-          <td><img class="default" src="grabbing.gif" alt="geschlossenes Hand-Icon, von der Rückseite der Hand"/></td>
-          <td>Etwas wird erfasst (zum Verschieben gezogen).</td>
+          <td><img class="default" src="grabbing.gif" alt="geschlossene Hand-Symbol, mit dem Handrücken"/></td>
+          <td>Etwas wird gegriffen (zum Bewegen gezogen).</td>
         </tr>
         <tr style="cursor: all-scroll">
           <th rowspan="15" scope="row" style="cursor: auto">
-            Größenänderung &amp; Scrollen
+            Größe ändern &amp; scrollen
           </th>
           <td><code>all-scroll</code></td>
-          <td><img alt="Icon eines mittelgroßen Punkts mit vier Dreiecken darum." src="all-scroll.gif" /></td>
+          <td><img alt="Symbol eines mittleren Punktes mit vier Dreiecken darum." src="all-scroll.gif" /></td>
           <td>
-            Etwas kann in jeder Richtung gescrollt werden (schwenken).<br /><a href="https://bugzil.la/275174">Firefox-Bug 275174</a>: Unter Windows ist <code>all-scroll</code> dasselbe wie <code>move</code>.
+            Etwas kann in jeder Richtung gescrollt (verschoben) werden.<br /><a href="https://bugzil.la/275174">Firefox-Fehler 275174</a>:
+            Unter Windows ist <code>all-scroll</code> dasselbe wie <code>move</code>.
           </td>
         </tr>
         <tr style="cursor: col-resize">
           <td><code>col-resize</code></td>
-          <td><img alt="col-resize.gif" src="col-resize.gif" alt="zwei schmale parallele vertikale Linien mit einem kleinen Pfeil, der nach links zeigt und ein weiterer, der nach rechts zeigt" /></td>
+          <td><img alt="col-resize.gif" src="col-resize.gif" alt="zwei schmale parallele vertikale Linien mit einem kleinen Pfeil, der nach links und einem weiteren, der nach rechts zeigt" /></td>
           <td>
-            Das Element/Spalte kann horizontal geändert werden. Oft dargestellt als Pfeile, die nach links und rechts zeigen, mit einer vertikalen Trennleiste dazwischen.
+            Das Element/die Spalte kann horizontal geändert werden.
+            Oft als Pfeile dargestellt, die nach links und rechts zeigen, getrennt durch eine vertikale Linie.
           </td>
         </tr>
         <tr style="cursor: row-resize">
           <td><code>row-resize</code></td>
-          <td><img src="row-resize.gif" alt="zwei schmale parallele horizontale Linien mit einem kleinen Pfeil, der nach oben zeigt, und ein weiterer, der nach unten zeigt" /></td>
+          <td><img src="row-resize.gif" alt="zwei schmale parallele horizontale Linien mit einem kleinen Pfeil, der nach oben und einem weiteren, der nach unten zeigt" /></td>
           <td>
-            Das Element/Reihe kann vertikal geändert werden. Oft dargestellt als Pfeile, die nach oben und unten zeigen, mit einer horizontalen Trennleiste dazwischen.
+            Das Element/die Zeile kann vertikal geändert werden.
+            Oft als Pfeile dargestellt, die nach oben und unten zeigen, getrennt durch eine horizontale Linie.
           </td>
         </tr>
         <tr style="cursor: n-resize">
@@ -215,8 +230,9 @@ Jede `<url>` kann optional von einem Paar durch Leerzeichen getrennten Zahlen ge
             />
           </td>
           <td rowspan="8" style="cursor: auto">
-            Ein Rand soll verschoben werden. Zum Beispiel wird der <code>se-resize</code>-Cursor verwendet, wenn die Bewegung von der <em>süd-östlichen</em> Ecke des Kastens ausgeht.<br />
-            In einigen Umgebungen wird ein äquivalenter bidirektionaler Größenänderungs-Cursor angezeigt. Zum Beispiel sind <code>n-resize</code> und <code>s-resize</code> dasselbe wie <code>ns-resize</code>.
+            Eine Kante soll verschoben werden. Zum Beispiel wird der <code>se-resize</code>-Cursor verwendet, wenn die Bewegung von der <em>süd-östlichen</em> Ecke des Rahmens ausgeht.<br />
+            In einigen Umgebungen wird ein äquivalenter bidirektionaler Resize-Cursor angezeigt.
+            Zum Beispiel sind <code>n-resize</code> und <code>s-resize</code> dasselbe wie <code>ns-resize</code>.
           </td>
         </tr>
         <tr style="cursor: e-resize">
@@ -285,7 +301,7 @@ Jede `<url>` kann optional von einem Paar durch Leerzeichen getrennten Zahlen ge
         <tr style="cursor: ew-resize">
           <td><code>ew-resize</code></td>
           <td><img alt="dünner langer Pfeil, der nach links und rechts zeigt" class="default" src="3-resize.gif" /></td>
-          <td rowspan="4" style="cursor: auto">Bidirektionale Größenänderungs-Cursor.</td>
+          <td rowspan="4" style="cursor: auto">Bidirektionaler Resize-Cursor.</td>
         </tr>
         <tr style="cursor: ns-resize">
           <td><code>ns-resize</code></td>
@@ -293,18 +309,18 @@ Jede `<url>` kann optional von einem Paar durch Leerzeichen getrennten Zahlen ge
         </tr>
         <tr style="cursor: nesw-resize">
           <td><code>nesw-resize</code></td>
-          <td><img alt="dünner langer Pfeil, der sowohl nach oben-rechts als auch unten-links zeigt" class="default" src="1-resize.gif" /></td>
+          <td><img alt="dünner langer Pfeil, der sowohl nach oben-rechts als auch nach unten-links zeigt" class="default" src="1-resize.gif" /></td>
         </tr>
         <tr style="cursor: nwse-resize">
           <td><code>nwse-resize</code></td>
-          <td><img alt="dünner langer Pfeil, der sowohl nach oben-links als auch unten-rechts zeigt" class="default" src="4-resize.gif" /></td>
+          <td><img alt="dünner langer Pfeil, der sowohl nach oben-links als auch nach unten-rechts zeigt" class="default" src="4-resize.gif" /></td>
         </tr>
         <tr style="cursor: zoom-in">
-          <th rowspan="2" scope="row" style="cursor: auto">Zoomen</th>
+          <th rowspan="2" scope="row" style="cursor: auto">Zoom</th>
           <td><code>zoom-in</code></td>
           <td><img alt="Lupe mit einem Pluszeichen" class="default" src="zoom-in.gif" /></td>
           <td rowspan="2" style="cursor: auto">
-            <p>Etwas kann vergrößert oder verkleinert werden.</p>
+            <p>Etwas kann hineingezoomt (vergrößert) oder herausgezoomt werden.</p>
           </td>
         </tr>
         <tr style="cursor: zoom-out">
@@ -322,17 +338,17 @@ Jede `<url>` kann optional von einem Paar durch Leerzeichen getrennten Zahlen ge
 
 {{csssyntax}}
 
-## Anwendungsnotizen
+## Anwendungshinweise
 
-### Symbolgrößenbeschränkungen
+### Begrenzungen der Symbolgröße
 
-Obwohl die Spezifikation die Größe des `cursor`-Bildes nicht begrenzt, beschränken {{Glossary("user_agent", "User Agents")}} diese häufig, um potenziellen Missbrauch zu vermeiden. Zum Beispiel sind in Firefox und Chromium-Cursorbilder standardmäßig auf 128x128 Pixel beschränkt, aber es wird empfohlen, die Cursorbildgröße auf 32x32 Pixel zu beschränken. Cursoränderungen mit Bildern, die größer sind als die von den User Agents maximal unterstützte Größe, werden in der Regel einfach ignoriert.
+Obwohl die Spezifikation die Bildgröße von `cursor` nicht einschränkt, beschränken Benutzeragenten sie in der Regel, um potenziellen Missbrauch zu vermeiden. Zum Beispiel sind in Firefox und Chromium Cursor-Bilder standardmäßig auf 128x128 Pixel beschränkt, es wird jedoch empfohlen, die Cursorbildgröße auf 32x32 Pixel zu beschränken. Cursor-Änderungen, die Bilder verwenden, die größer sind als die maximal unterstützte Größe des Benutzeragenten, werden im Allgemeinen einfach ignoriert.
 
 ### Unterstützte Bilddateiformate
 
-Laut Spezifikation müssen User Agents PNG-Dateien, SVG v1.1-Dateien im sicheren statischen Modus, die eine natürliche Größe enthalten, und alle anderen nicht animierten Bilddateiformate unterstützen, die sie auch für Bilder in anderen Eigenschaften unterstützen. Desktop-Browser unterstützen auch generell das `.cur`-Dateiformat.
+Benutzeragenten sind gemäß der Spezifikation verpflichtet, PNG-Dateien, SVG v1.1-Dateien im sicheren statischen Modus, die eine natürliche Größe enthalten, und alle anderen nicht animierten Bilddateiformate, die sie für Bilder in anderen Eigenschaften unterstützen, zu unterstützen. Desktop-Browser unterstützen auch allgemein das `.cur`-Dateiformat.
 
-Die Spezifikation gibt ferner an, dass User Agents _auch_ SVG v1.1-Dateien im sicheren animierten Modus unterstützen _sollten_, die eine natürliche Größe enthalten, zusammen mit allen anderen animierten Bilddateiformaten, die sie für Bilder in anderen Eigenschaften unterstützen. User Agents _könnten_ sowohl statische als auch animierte SVG-Bilder unterstützen, die keine natürliche Größe enthalten.
+Die Spezifikation gibt weiter an, dass Benutzeragenten _sollten_ auch SVG v1.1-Dateien in sicherem animiertem Modus, die eine natürliche Größe enthalten, sowie alle anderen animierten Bilderdateiformate unterstützen, die sie für Bilder in anderen Eigenschaften unterstützen. Benutzeragenten _dürfen_ sowohl statische als auch animierte SVG-Bilder unterstützen, die keine natürliche Größe enthalten.
 
 ### iPadOS
 
@@ -340,11 +356,11 @@ iPadOS unterstützt Zeigegeräte wie Trackpads und Mäuse. Standardmäßig wird
 
 ### Weitere Hinweise
 
-Cursoränderungen, die mit Symbolleistenbereichen überschneiden, werden häufig blockiert, um Phishing zu vermeiden.
+Cursor-Änderungen, die sich mit Symbolleistenbereichen überschneiden, werden häufig blockiert, um Spoofing zu vermeiden.
 
 ## Beispiele
 
-### Einstellen von Cursortypen
+### Festlegen von Kurznachrichtentypen
 
 ```css
 .foo {
@@ -373,3 +389,4 @@ Cursoränderungen, die mit Symbolleistenbereichen überschneiden, werden häufig
 
 - {{cssxref("pointer-events")}}
 - {{cssxref("url_value", "&lt;url&gt;")}} Typ
+- SVG-Attribut {{SVGAttr("cursor")}}
diff --git a/files/de/web/css/direction/index.md b/files/de/web/css/direction/index.md
index eff94ebf5..0ef928b24 100644
--- a/files/de/web/css/direction/index.md
+++ b/files/de/web/css/direction/index.md
@@ -2,25 +2,25 @@
 title: direction
 slug: Web/CSS/direction
 l10n:
-  sourceCommit: 5026c14bd6d2b6b377289aadac7eceae9282e806
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
 > [!WARNING]
-> Wenn möglich, wird Autoren empfohlen, die CSS-Eigenschaft `direction` zu vermeiden und stattdessen das globale HTML-Attribut [`dir`](/de/docs/Web/HTML/Global_attributes/dir) zu verwenden.
+> Wo möglich, sollten Autoren ermutigt werden, das `direction` CSS-Attribut zu vermeiden und stattdessen das HTML [`dir`](/de/docs/Web/HTML/Global_attributes/dir) globale Attribut zu verwenden.
 
-Die **`direction`** [CSS](/de/docs/Web/CSS)-Eigenschaft legt die Richtung von Text, Tabellenspalten und horizontalem Überlauf fest. Verwenden Sie `rtl` für Sprachen, die von rechts nach links geschrieben werden (wie Hebräisch oder Arabisch), und `ltr` für solche, die von links nach rechts geschrieben werden (wie Englisch und die meisten anderen Sprachen).
+Die **`direction`** [CSS](/de/docs/Web/CSS)-Eigenschaft legt die Richtung von Text, Tabellen-Spalten und horizontalem Überlauf fest. Verwenden Sie `rtl` für Sprachen, die von rechts nach links geschrieben werden (wie Hebräisch oder Arabisch), und `ltr` für solche, die von links nach rechts geschrieben werden (wie Englisch und die meisten anderen Sprachen).
 
 {{EmbedInteractiveExample("pages/css/direction.html")}}
 
-Beachten Sie, dass die Textrichtung normalerweise innerhalb eines Dokuments definiert wird (z. B. mit dem [HTML-Attribut `dir`](/de/docs/Web/HTML/Global_attributes/dir)) und nicht durch direkte Verwendung der `direction`-Eigenschaft.
+Beachten Sie, dass die Textrichtung normalerweise innerhalb eines Dokuments definiert ist (z. B. mit [HTML's `dir`-Attribut](/de/docs/Web/HTML/Global_attributes/dir)) anstatt durch direkte Nutzung der `direction`-Eigenschaft.
 
-Die Eigenschaft legt die Basis-Textrichtung von Block-Elementen und die Richtung von Einbettungen fest, die durch die {{Cssxref("unicode-bidi")}}-Eigenschaft erstellt werden. Sie legt auch die Standardausrichtung von Text, Block-Elementen und die Flussrichtung von Zellen innerhalb einer Tabellenzeile fest.
+Die Eigenschaft legt die Basistextrichtung von Block-Level-Elementen und die Richtung von Einbettungen, die durch die {{Cssxref("unicode-bidi")}}-Eigenschaft erstellt wurden, fest. Sie legt auch die Standardausrichtung von Text, Block-Level-Elementen und die Richtung fest, in die sich Zellen innerhalb einer Tabellenzeile bewegen.
 
-Im Gegensatz zum `dir`-Attribut in HTML wird die `direction`-Eigenschaft nicht von Tabellenspalten in Tabellenzellen vererbt, da die CSS-Vererbung dem Dokumentbaum folgt und Tabellenzellen in Zeilen, aber nicht in Spalten enthalten sind.
+Im Gegensatz zum `dir`-Attribut in HTML wird die `direction`-Eigenschaft nicht von Tabellenspalten in Tabellenzellen vererbt, da CSS-Vererbung dem Dokumentbaum folgt und Tabellenzellen innerhalb von Zeilen, aber nicht innerhalb von Spalten liegen.
 
-Die `direction`- und {{cssxref("unicode-bidi")}}-Eigenschaften sind die einzigen beiden Eigenschaften, die nicht von der {{cssxref("all")}}-Kurzschreibweise betroffen sind.
+Die `direction`- und {{cssxref("unicode-bidi")}}-Eigenschaften sind die einzigen beiden Eigenschaften, die nicht von der {{cssxref("all")}} Kurzschrift-Eigenschaft betroffen sind.
 
 ## Syntax
 
@@ -40,11 +40,11 @@ direction: unset;
 ### Werte
 
 - `ltr`
-  - : Text und andere Elemente verlaufen von links nach rechts. Dies ist der Standardwert.
+  - : Text und andere Elemente gehen von links nach rechts. Dies ist der Standardwert.
 - `rtl`
-  - : Text und andere Elemente verlaufen von rechts nach links.
+  - : Text und andere Elemente gehen von rechts nach links.
 
-Damit die `direction`-Eigenschaft irgendeine Auswirkung auf inline-Level-Elemente hat, muss der Wert der {{Cssxref("unicode-bidi")}}-Eigenschaft `embed` oder `override` sein.
+Damit die `direction`-Eigenschaft eine Wirkung auf Inline-Level-Elemente hat, muss der Wert der {{Cssxref("unicode-bidi")}}-Eigenschaft `embed` oder `override` sein.
 
 ## Formale Definition
 
@@ -58,7 +58,7 @@ Damit die `direction`-Eigenschaft irgendeine Auswirkung auf inline-Level-Element
 
 ### Einstellung der Richtung von rechts nach links
 
-Im folgenden Beispiel befinden sich zwei Textstrings, die beide mit `direction: rtl` angezeigt werden. Obwohl der arabische Text mit dieser Einstellung korrekt angezeigt wird, hat der englische Text nun einen Punkt an einer ungewöhnlichen Stelle.
+Im folgenden Beispiel sind zwei Textabschnitte, die beide mit `direction: rtl` angezeigt werden. Während der arabische Text mit dieser Einstellung korrekt angezeigt wird, befindet sich der Punkt im englischen Text jetzt an einer ungewöhnlichen Stelle.
 
 ```css
 blockquote {
@@ -91,7 +91,8 @@ blockquote {
 
 ## Siehe auch
 
-- {{Cssxref("unicode-bidi")}}
-- {{Cssxref("writing-mode")}}
-- Das globale HTML-Attribut [`dir`](/de/docs/Web/HTML/Global_attributes/dir)
-- [Erstellung vertikaler Formularelemente](/de/docs/Web/CSS/CSS_writing_modes/Vertical_controls)
+- {{CSSxRef("unicode-bidi")}}
+- {{CSSxRef("writing-mode")}}
+- SVG {{SVGAttr("direction")}} Attribut
+- Das HTML [`dir`](/de/docs/Web/HTML/Global_attributes/dir) globale Attribut
+- [Erstellen von vertikalen Formularsteuerelementen](/de/docs/Web/CSS/CSS_writing_modes/Vertical_controls)
diff --git a/files/de/web/css/display/index.md b/files/de/web/css/display/index.md
index 773836677..b1abc274c 100644
--- a/files/de/web/css/display/index.md
+++ b/files/de/web/css/display/index.md
@@ -2,14 +2,14 @@
 title: display
 slug: Web/CSS/display
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`display`**-Eigenschaft von [CSS](/de/docs/Web/CSS) legt fest, ob ein Element als [Block- oder Inline-Box](/de/docs/Web/CSS/CSS_flow_layout) behandelt wird und welches Layout für seine Kinder verwendet wird, wie zum Beispiel das [Flow-Layout](/de/docs/Web/CSS/CSS_flow_layout), [Grid](/de/docs/Web/CSS/CSS_grid_layout) oder [Flex](/de/docs/Web/CSS/CSS_flexible_box_layout).
+Die **`display`** [CSS](/de/docs/Web/CSS) Eigenschaft legt fest, ob ein Element als [Block- oder Inline-Box](/de/docs/Web/CSS/CSS_flow_layout) behandelt wird und welches Layout für seine Kinder verwendet wird, wie zum Beispiel [Flow-Layout](/de/docs/Web/CSS/CSS_flow_layout), [Grid](/de/docs/Web/CSS/CSS_grid_layout) oder [Flex](/de/docs/Web/CSS/CSS_flexible_box_layout).
 
-Formal legt die **`display`**-Eigenschaft die inneren und äußeren _Display-Typen_ eines Elements fest. Der äußere Typ bestimmt die Teilnahme eines Elements am [Flow-Layout](/de/docs/Web/CSS/CSS_flow_layout); der innere Typ legt das Layout der Kinder fest. Einige Werte von `display` sind in ihren eigenen individuellen Spezifikationen vollständig definiert; zum Beispiel sind die Details, was passiert, wenn `display: flex` deklariert wird, in der CSS Flexible Box Model-Spezifikation definiert.
+Formal legt die **`display`** Eigenschaft die inneren und äußeren _Anzeigetypen_ eines Elements fest. Der äußere Typ bestimmt die Teilnahme eines Elements am [Flow-Layout](/de/docs/Web/CSS/CSS_flow_layout); der innere Typ legt das Layout der Kinder fest. Einige Werte von `display` sind vollständig in ihren eigenen Spezifikationen definiert; beispielsweise sind die Einzelheiten, was passiert, wenn `display: flex` deklariert wird, in der CSS Flexible Box Model Spezifikation definiert.
 
 {{EmbedInteractiveExample("pages/css/display.html")}}
 
@@ -53,28 +53,28 @@ display: revert-layer;
 display: unset;
 ```
 
-Die CSS-Eigenschaft `display` wird unter Verwendung von Schlüsselwortwerten spezifiziert.
+Die CSS-Eigenschaft `display` wird mithilfe von Schlüsselwortwerten angegeben.
 
 ## Gruppierte Werte
 
-Die Schlüsselwortwerte können in sechs Kategorien gruppiert werden.
+Die Schlüsselwortwerte können in sechs Wertkategorien gruppiert werden.
 
 ### Outside
 
 - {{CSSxRef("&lt;display-outside&gt;")}}
 
-  - : Diese Schlüsselwörter spezifizieren den äußeren Anzeige-Typ des Elements, wodurch dessen Rolle im Fluss-Layout festgelegt wird:
+  - : Diese Schlüsselwörter spezifizieren den äußeren Anzeigetyp des Elements, der im Wesentlichen seine Rolle im Flow-Layout ist:
 
     - `block`
-      - : Das Element erzeugt eine Block-Box, die sowohl vor als auch nach dem Element Zeilenumbrüche erzeugt, wenn es im normalen Fluss ist.
+      - : Das Element generiert eine Block-Box und erzeugt Zeilenumbrüche sowohl vor als auch nach dem Element, wenn es im normalen Fluss ist.
     - `inline`
-      - : Das Element erzeugt eine oder mehrere Inline-Boxen, die vor oder nach sich selbst keine Zeilenumbrüche erzeugen. Im normalen Fluss befindet sich das nächste Element auf derselben Linie, wenn Platz vorhanden ist.
+      - : Das Element erzeugt eine oder mehrere Inline-Boxen, die vor oder nach sich selbst keine Zeilenumbrüche erzeugen. Im normalen Fluss wird das nächste Element in derselben Zeile erscheinen, wenn dort Platz ist.
 
 > [!NOTE]
-> Wenn Browser, die die Multi-Schlüsselwort-Syntax unterstützen, eine Display-Eigenschaft mit nur einem **äußeren** Wert (z.B. `display: block` oder `display: inline`) vorfinden, wird der innere Wert auf `flow` gesetzt (z.B. `display: block flow` und `display: inline flow`).
+> Wenn Browser, die die Multi-Schlüsselwort-Syntax unterstützen, auf eine Display-Eigenschaft stoßen, die nur einen **äußeren** Wert hat (z. B. `display: block` oder `display: inline`), wird der innere Wert auf `flow` gesetzt (z. B. `display: block flow` und `display: inline flow`).
 
 > [!NOTE]
-> Um sicherzustellen, dass Layouts in älteren Browsern funktionieren, können Sie die Einwert-Syntax verwenden, zum Beispiel könnte `display: inline flex` das folgende Fallback haben
+> Um sicherzustellen, dass Layouts in älteren Browsern funktionieren, können Sie die Ein-Wert-Syntax verwenden, zum Beispiel könnte `display: inline flex` den folgenden Fallback haben
 >
 > ```css
 > .container {
@@ -89,126 +89,126 @@ Die Schlüsselwortwerte können in sechs Kategorien gruppiert werden.
 
 - {{CSSxRef("&lt;display-inside&gt;")}}
 
-  - : Diese Schlüsselwörter spezifizieren den inneren Anzeige-Typ des Elements, der den Typ des Formatierungskontexts definiert, in dem seine Inhalte angeordnet sind (sofern es sich um ein nicht ersetztes Element handelt):
+  - : Diese Schlüsselwörter spezifizieren den inneren Anzeigetyp des Elements, der den Typ des Formatierungskontextes definiert, in dem seine Inhalte angeordnet werden (vorausgesetzt, es ist ein nicht ersetzt Element):
 
     - `flow`
 
-      - : Das Element ordnet seine Inhalte mithilfe des Flusslayouts (Block-und-Inline-Layout) an.
+      - : Das Element ordnet seine Inhalte mit dem Flow-Layout (Block-und-Inline-Layout) an.
 
-        Wenn sein äußerer Anzeigetyp `inline` ist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, erzeugt es eine Inline-Box. Andernfalls erzeugt es eine Block-Box.
+        Wenn sein äußerer Anzeigetyp `inline` ist und es in einem Block- oder Inline-Formatierungskontext teilnimmt, dann erzeugt es eine Inline-Box. Andernfalls erzeugt es eine Block-Box.
 
-        Abhängig vom Wert anderer Eigenschaften (wie {{CSSxRef("position")}}, {{CSSxRef("float")}} oder {{CSSxRef("overflow")}}) und davon, ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, wird entweder ein neuer [Block-Formatierungskontext](/de/docs/Web/CSS/CSS_display/Block_formatting_context) (BFC) für seine Inhalte erstellt oder seine Inhalte in den übergeordneten Formatierungskontext integriert.
+        Abhängig vom Wert anderer Eigenschaften (wie {{CSSxRef("position")}}, {{CSSxRef("float")}}, oder {{CSSxRef("overflow")}}) und ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, etabliert es entweder einen neuen [Block-Formatierungskontext](/de/docs/Web/CSS/CSS_display/Block_formatting_context) (BFC) für seine Inhalte oder integriert seine Inhalte in den übergeordneten Formatierungskontext.
 
     - `flow-root`
-      - : Das Element erzeugt eine Block-Box, die einen neuen [Block-Formatierungskontext](/de/docs/Web/CSS/CSS_display/Block_formatting_context) erstellt, der definiert, wo die Formatierungswurzel liegt.
+      - : Das Element erzeugt eine Block-Box, die einen neuen [Block-Formatierungskontext](/de/docs/Web/CSS/CSS_display/Block_formatting_context) etabliert und definiert, wo die Formatierungswurzel liegt.
     - `table`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("table")}}-Elemente. Es definiert eine blocklevel-Box.
+      - : Diese Elemente verhalten sich wie HTML {{HTMLElement("table")}} Elemente. Es definiert eine Block-Box.
     - `flex`
-      - : Das Element verhält sich wie ein blocklevel-Element und ordnet seinen Inhalt gemäß dem [Flexbox-Modell](/de/docs/Web/CSS/CSS_flexible_box_layout) an.
+      - : Das Element verhält sich wie ein Block-Element und ordnet seinen Inhalt entsprechend dem [Flexbox-Modell](/de/docs/Web/CSS/CSS_flexible_box_layout) an.
     - `grid`
-      - : Das Element verhält sich wie ein blocklevel-Element und ordnet seinen Inhalt gemäß dem [Grid-Modell](/de/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) an.
+      - : Das Element verhält sich wie ein Block-Element und ordnet seinen Inhalt entsprechend dem [Grid-Modell](/de/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) an.
     - `ruby`
-      - : Das Element verhält sich wie ein inline-level-Element und ordnet seinen Inhalt gemäß dem Ruby-Formatierungsmodell an. Es verhält sich wie die entsprechenden HTML-{{HTMLElement("ruby")}}-Elemente.
+      - : Das Element verhält sich wie ein Inline-Element und ordnet seinen Inhalt entsprechend dem Ruby-Formatierungsmodell an. Es verhält sich wie die entsprechenden HTML {{HTMLElement("ruby")}} Elemente.
 
 > [!NOTE]
-> Wenn Browser, die die Multi-Schlüsselwort-Syntax unterstützen, eine Display-Eigenschaft mit nur einem **inneren** Wert (z.B. `display: flex` oder `display: grid`) vorfinden, wird der äußere Wert auf `block` gesetzt (z.B. `display: block flex` und `display: block grid`).
+> Wenn Browser, die die Multi-Schlüsselwort-Syntax unterstützen, auf eine Display-Eigenschaft stoßen, die nur einen **inneren** Wert hat (z. B. `display: flex` oder `display: grid`), wird der äußere Wert auf `block` gesetzt (z. B. `display: block flex` und `display: block grid`).
 
 ### List Item
 
 - {{CSSxRef("&lt;display-listitem&gt;")}}
-  - : Das Element erzeugt eine Block-Box für den Inhalt und eine separate Listenpunkte-Inline-Box.
+  - : Das Element generiert eine Block-Box für den Inhalt und eine separate Listen-Item-Inline-Box.
 
-Ein einzelner Wert von `list-item` bewirkt, dass sich das Element wie ein Listeneintrag verhält.
+Ein einzelner Wert von `list-item` führt dazu, dass das Element sich wie ein Listenpunkt verhält.
 Dies kann zusammen mit {{CSSxRef("list-style-type")}} und {{CSSxRef("list-style-position")}} verwendet werden.
 
-`list-item` kann auch mit jedem {{CSSxRef("&lt;display-outside&gt;")}}-Schlüsselwort und dem `flow` oder `flow-root` {{CSSxRef("&lt;display-inside&gt;")}}-Schlüsselwort kombiniert werden.
+`list-item` kann auch mit jedem {{CSSxRef("&lt;display-outside&gt;")}} Schlüsselwort und dem `flow` oder `flow-root` {{CSSxRef("&lt;display-inside&gt;")}} Schlüsselwort kombiniert werden.
 
 > [!NOTE]
-> In Browsern, die die Multi-Schlüsselwort-Syntax unterstützen, wird, wenn kein innerer Wert angegeben ist, standardmäßig `flow` gesetzt.
-> Wenn kein äußerer Wert angegeben ist, hat die Hauptbox einen äußeren Anzeige-Typ von `block`.
+> In Browsern, die die Multi-Schlüsselwort-Syntax unterstützen, wird es standardmäßig auf `flow` gesetzt, wenn kein innerer Wert angegeben ist.
+> Wenn kein äußerer Wert angegeben ist, hat die Hauptbox einen äußeren Anzeigetyp von `block`.
 
 ### Internal
 
 - {{CSSxRef("&lt;display-internal&gt;")}}
 
-  - : Einige Layout-Modelle wie `table` und `ruby` haben eine komplexe interne Struktur mit mehreren verschiedenen Rollen, die ihre Kinder und Nachkommen erfüllen können.
-    Dieser Abschnitt definiert jene "internen" Anzeige-Werte, die nur innerhalb dieses spezifischen Layout-Modus Bedeutung haben.
+  - : Einige Layout-Modelle wie `table` und `ruby` haben eine komplexe interne Struktur mit mehreren unterschiedlichen Rollen, die ihre Kinder und Nachkommen ausfüllen können.
+    Dieser Abschnitt definiert diese "internen" Anzeige-Werte, die nur innerhalb dieses speziellen Layout-Modus Bedeutung haben.
 
     - `table-row-group`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("tbody")}}-Elemente.
+      - : Diese Elemente verhalten sich wie {{HTMLElement("tbody")}} HTML-Elemente.
     - `table-header-group`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("thead")}}-Elemente.
+      - : Diese Elemente verhalten sich wie {{HTMLElement("thead")}} HTML-Elemente.
     - `table-footer-group`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("tfoot")}}-Elemente.
+      - : Diese Elemente verhalten sich wie {{HTMLElement("tfoot")}} HTML-Elemente.
     - `table-row`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("tr")}}-Elemente.
+      - : Diese Elemente verhalten sich wie {{HTMLElement("tr")}} HTML-Elemente.
     - `table-cell`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("td")}}-Elemente.
+      - : Diese Elemente verhalten sich wie {{HTMLElement("td")}} HTML-Elemente.
     - `table-column-group`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("colgroup")}}-Elemente.
+      - : Diese Elemente verhalten sich wie {{HTMLElement("colgroup")}} HTML-Elemente.
     - `table-column`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("col")}}-Elemente.
+      - : Diese Elemente verhalten sich wie {{HTMLElement("col")}} HTML-Elemente.
     - `table-caption`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("caption")}}-Elemente.
+      - : Diese Elemente verhalten sich wie {{HTMLElement("caption")}} HTML-Elemente.
     - `ruby-base`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("rb")}}-Elemente.
+      - : Diese Elemente verhalten sich wie {{HTMLElement("rb")}} HTML-Elemente.
     - `ruby-text`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("rt")}}-Elemente.
+      - : Diese Elemente verhalten sich wie {{HTMLElement("rt")}} HTML-Elemente.
     - `ruby-base-container`
-      - : Diese Elemente werden als anonyme Boxen erzeugt.
+      - : Diese Elemente werden als anonyme Boxen generiert.
     - `ruby-text-container`
-      - : Diese Elemente verhalten sich wie HTML-{{HTMLElement("rtc")}}-Elemente.
+      - : Diese Elemente verhalten sich wie {{HTMLElement("rtc")}} HTML-Elemente.
 
 ### Box
 
 - {{CSSxRef("&lt;display-box&gt;")}}
 
-  - : Diese Werte definieren, ob ein Element überhaupt Anzeige-Boxen erzeugt.
+  - : Diese Werte definieren, ob ein Element überhaupt Anzeigeboxen erzeugt.
 
     - `contents`
 
-      - : Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Bitte beachten Sie, dass die CSS Display Level 3 Spec definiert, wie der Wert `contents` sich auf "ungewöhnliche Elemente" auswirken sollte – Elemente, die nicht rein durch CSS-Box-Konzepte wie ersetzte Elemente gerendert werden. Weitere Details finden Sie unter [Anhang B: Effekte von display: contents auf Ungewöhnliche Elemente](https://drafts.csswg.org/css-display/#unbox).
+      - : Diese Elemente erzeugen von sich aus keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Bitte beachten Sie, dass die CSS Display Level 3-Spezifikation definiert, wie sich der `contents` Wert auf "ungewöhnliche Elemente" auswirken sollte - Elemente, die nicht ausschließlich durch CSS-Box-Konzepte gerendert werden, wie z. B. ersetzte Elemente. Weitere Einzelheiten finden Sie unter [Anhang B: Effekte von display: contents auf ungewöhnliche Elemente](https://drafts.csswg.org/css-display/#unbox).
 
     - `none`
-      - : Schaltet die Anzeige eines Elements aus, sodass es keinen Einfluss auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existiert). Alle Nachkommenelemente haben ebenfalls ihre Anzeige ausgeschaltet.
-        Um ein Element den Platz einnehmen zu lassen, den es normalerweise einnehmen würde, ohne tatsächlich irgendetwas anzuzeigen, verwenden Sie stattdessen die {{CSSxRef("visibility")}}-Eigenschaft.
+      - : Schaltet die Anzeige eines Elements aus, sodass es keinen Einfluss auf das Layout hat (das Dokument wird so gerendert, als ob das Element nicht existieren würde). Alle Nachkommenelemente haben ebenfalls ihre Anzeige abgeschaltet.
+        Um ein Element den Raum einnehmen zu lassen, den es normalerweise einnehmen würde, aber nichts tatsächlich anzuzeigen, verwenden Sie stattdessen die {{CSSxRef("visibility")}} Eigenschaft.
 
 ### Precomposed
 
 - {{CSSxRef("&lt;display-legacy&gt;")}}
 
-  - : CSS 2 verwendete eine Single-Keyword, vorkomponierte Syntax für die `display`-Eigenschaft, die separate Schlüsselwörter für blocklevel- und inline-level-Varianten des gleichen Layout-Modus erforderte.
+  - : CSS 2 verwendete eine Ein-Schlüsselwort, vorgefertigte Syntax für die `display` Eigenschaft, die separate Schlüsselwörter für Block-Level- und Inline-Level-Varianten desselben Layout-Modus erforderte.
 
     - `inline-block`
 
-      - : Das Element erzeugt eine Block-Box, die mit dem umgebenden Inhalt geflossen wird, als ob es eine einzelne Inline-Box wäre (verhält sich ähnlich wie ein ersetztes Element).
+      - : Das Element erzeugt eine Block-Box, die mit umgebenden Inhalten als wäre es eine einzelne Inline-Box geflossen wird (sich wie ein ersetztes Element verhält).
 
-        Es ist äquivalent zu `inline flow-root`.
+        Es ist gleichwertig mit `inline flow-root`.
 
     - `inline-table`
 
-      - : Der `inline-table`-Wert hat keine direkte Zuordnung in HTML. Es verhält sich wie ein HTML-{{HTMLElement("table")}}-Element, jedoch als Inline-Box statt einer Blocklevel-Box. Innerhalb der Tabellenbox befindet sich ein Blocklevel-Kontext.
+      - : Der `inline-table` Wert hat keine direkte Zuordnung in HTML. Es verhält sich wie ein HTML {{HTMLElement("table")}} Element, aber als Inline-Box und nicht als Block-Level-Box. Innerhalb der Tabellenbox befindet sich ein Block-Level-Kontext.
 
-        Es ist äquivalent zu `inline table`.
+        Es ist gleichwertig mit `inline table`.
 
     - `inline-flex`
 
-      - : Das Element verhält sich wie ein inline-level-Element und ordnet seinen Inhalt gemäß dem Flexbox-Modell an.
+      - : Das Element verhält sich wie ein Inline-Element und ordnet seinen Inhalt entsprechend dem Flexbox-Modell an.
 
-        Es ist äquivalent zu `inline flex`.
+        Es ist gleichwertig mit `inline flex`.
 
     - `inline-grid`
 
-      - : Das Element verhält sich wie ein inline-level-Element und ordnet seinen Inhalt gemäß dem Grid-Modell an.
+      - : Das Element verhält sich wie ein Inline-Element und ordnet seinen Inhalt entsprechend dem Grid-Modell an.
 
-        Es ist äquivalent zu `inline grid`.
+        Es ist gleichwertig mit `inline grid`.
 
 ### Welche Syntax sollten Sie verwenden?
 
-Das [CSS display module](/de/docs/Web/CSS/CSS_display) beschreibt eine Multi-Schlüsselwort-Syntax für Werte, die Sie mit der `display`-Eigenschaft verwenden können, um **äußeres** und **inneres** Display explizit zu definieren.
-Die Single-Keyword-Werte (vorkomponierte `<display-legacy>`-Werte) werden für die Rückwärtskompatibilität unterstützt.
+Das [CSS-Display-Modul](/de/docs/Web/CSS/CSS_display) beschreibt eine Multi-Schlüsselwort-Syntax für Werte, die Sie mit der `display` Eigenschaft verwenden können, um explizit **äußere** und **innere** Anzeige zu definieren.
+Die Einzel-Schlüsselwort-Werte (vorgefertigte `<display-legacy>` Werte) werden für die Rückwärtskompatibilität unterstützt.
 
-Zum Beispiel können Sie mit zwei Werten einen Inline-Flex-Container wie folgt spezifizieren:
+Zum Beispiel können Sie mit zwei Werten einen Inline-Flex-Container wie folgt festlegen:
 
 ```css
 .container {
@@ -216,7 +216,7 @@ Zum Beispiel können Sie mit zwei Werten einen Inline-Flex-Container wie folgt s
 }
 ```
 
-Dies kann auch mit dem traditionellen Einwert spezifiziert werden:
+Dies kann auch mit dem alten Einzelwert angegeben werden:
 
 ```css
 .container {
@@ -237,15 +237,15 @@ display: unset;
 
 ## Beschreibung
 
-Die einzelnen Seiten für die verschiedenen Typen von Werten, die `display` haben kann, zeigen mehrere Beispiele für diese Werte in Aktion - siehe den [Syntax](#syntax) Abschnitt. Darüber hinaus sollten Sie das folgende Material in Erwägung ziehen, das die verschiedenen Werte von `display` ausführlich behandelt.
+Die individuellen Seiten für die verschiedenen Typen von Werten, die `display` auf sich haben kann, enthalten mehrere Beispiele dieser Werte in Aktion - siehe den [Syntax](#syntax) Abschnitt. Zusätzlich beachten Sie bitte das folgende Material, das die verschiedenen Werte von display ausführlich behandelt.
 
 ### Multi-Schlüsselwort-Werte
 
 - [Using the multi-keyword syntax with CSS display](/de/docs/Web/CSS/display/multi-keyword_syntax_of_display)
 
-### CSS Fluss-Layout (display: block, display: inline)
+### CSS Flow Layout (display: block, display: inline)
 
-- [Block und Inline-Layout im normalen Fluss](/de/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)
+- [Block-und-Inline-Layout im normalen Fluss](/de/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)
 - [Flow-Layout und Überlauf](/de/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_overflow)
 - [Flow-Layout und Schreibmodi](/de/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes)
 - [Formatierungskontexte erklärt](/de/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts)
@@ -253,19 +253,19 @@ Die einzelnen Seiten für die verschiedenen Typen von Werten, die `display` habe
 
 ### display: flex
 
-- [Grundlegende Konzepte von Flexbox](/de/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+- [Grundlagen der Flexbox](/de/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
 - [Ausrichten von Elementen in einem Flex-Container](/de/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
-- [Kontrolle der Verhältnisse von Flex-Elementen entlang der Hauptachse](/de/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
-- [Beherrschen des Umbruchs von Flex-Elementen](/de/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)
-- [Anordnung von Flex-Elementen](/de/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)
+- [Steuern von Verhältnissen von Flex-Items entlang der Hauptachse](/de/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
+- [Meistern der Flex-Items-Verpackung](/de/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)
+- [Anordnung von Flex-Items](/de/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)
 - [Beziehung von Flexbox zu anderen Layout-Methoden](/de/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)
 - [Typische Anwendungsfälle von Flexbox](/de/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)
 
 ### display: grid
 
-- [Grundlegende Konzepte des Grid-Layouts](/de/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
+- [Grundlagen des Grid-Layouts](/de/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
 - [Beziehung zu anderen Layout-Methoden](/de/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods)
-- [Zeilenbasierte Platzierung](/de/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)
+- [Linienbasierte Platzierung](/de/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)
 - [Grid-Template-Bereiche](/de/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)
 - [Layout mit benannten Grid-Linien](/de/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines)
 - [Automatische Platzierung im Grid-Layout](/de/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout)
@@ -273,52 +273,52 @@ Die einzelnen Seiten für die verschiedenen Typen von Werten, die `display` habe
 - [Grids, logische Werte und Schreibmodi](/de/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes)
 - [CSS Grid-Layout und Barrierefreiheit](/de/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility)
 - [CSS Grid-Layout und Progressive Enhancement](/de/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement)
-- [Häufige Layouts mit Grids umsetzen](/de/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids)
+- [Realisierung gängiger Layouts mit Grids](/de/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids)
 
-### Animieren von display
+### Animation von display
 
-[Unterstützende Browser](#browser-kompatibilität) animieren `display` mit einem [diskreten Animationstyp](/de/docs/Web/CSS/CSS_animated_properties#discrete). Dies bedeutet im Allgemeinen, dass die Eigenschaft während der Animation zwischen zwei Werten zu 50% umschaltet.
+[Unterstützende Browser](#browser-kompatibilität) animieren `display` mit einem [diskreten Animationstyp](/de/docs/Web/CSS/CSS_animated_properties#discrete). Dies bedeutet im Allgemeinen, dass die Eigenschaft während der Animation zwischen zwei Werten um 50% wechselt.
 
-Es gibt eine Ausnahme, die auftritt, wenn `display: none` von oder zu einem anderen Wert animiert wird. In diesem Fall wird der Browser zwischen den beiden Werten umschalten, sodass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird. So zum Beispiel:
+Es gibt eine Ausnahme, die ist, wenn `display: none` animiert wird. In diesem Fall wechselt der Browser zwischen den beiden Werten, sodass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird. Zum Beispiel:
 
-- Beim Animieren von `display` von `none` zu `block` (oder einem anderen sichtbaren `display`-Wert) schaltet der Wert bei `0%` der Animationsdauer auf `block`, damit er die ganze Zeit über sichtbar ist.
-- Beim Animieren von `display` von `block` (oder einem anderen sichtbaren `display`-Wert) zu `none`, schaltet der Wert bei `100%` der Animationsdauer auf `none`, damit er die ganze Zeit über sichtbar ist.
+- Wenn `display` von `none` zu `block` (oder einem anderen sichtbaren `display` Wert) animiert wird, ändert sich der Wert bei `0%` der Animationsdauer auf `block`, sodass er während der Animation sichtbar ist.
+- Wenn `display` von `block` (oder einem anderen sichtbaren `display` Wert) zu `none` animiert wird, ändert sich der Wert bei `100%` der Animationsdauer zu `none`, sodass er während der Animation sichtbar ist.
 
-Dieses Verhalten ist nützlich, um Eintritts-/Austrittsanimationen zu erstellen, bei denen Sie beispielsweise einen Container mit `display: none` aus dem DOM entfernen, jedoch mit [opacity](/de/docs/Web/CSS/opacity) ausblenden möchten, anstatt sofort zu verschwinden.
+Dieses Verhalten ist nützlich für Erscheinen/Verschwinden-Animationen, bei denen Sie beispielsweise einen Container mit `display: none` aus dem DOM entfernen, ihn jedoch mit [`opacity`](/de/docs/Web/CSS/opacity) ausblenden möchten, anstatt sofort zu verschwinden.
 
-Beim Animieren von `display` mit [CSS-Animationen](/de/docs/Web/CSS/CSS_animations) müssen Sie den Ausgangswert von `display` in einem expliziten Schlüsselbild bereitstellen (beispielsweise mit `0%` oder `from`). Siehe [Using CSS animations](/de/docs/Web/CSS/CSS_animations/Using_CSS_animations) für ein Beispiel.
+Beim Animieren von `display` mit [CSS-Animationen](/de/docs/Web/CSS/CSS_animations) müssen Sie den startenden `display` Wert in einem expliziten Keyframe angeben (zum Beispiel mit `0%` oder `from`). Weitere Informationen finden Sie unter [Using CSS animations](/de/docs/Web/CSS/CSS_animations/Using_CSS_animations).
 
 Beim Animieren von `display` mit [CSS-Übergängen](/de/docs/Web/CSS/CSS_transitions) sind zwei zusätzliche Funktionen erforderlich:
 
-- [`@starting-style`](/de/docs/Web/CSS/@starting-style) bietet Ausgangswerte für Eigenschaften, von denen Sie bei erstmaliger Anzeige des animierten Elements aus übergehen möchten. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht bei der ersten Stilaktualisierung eines Elements oder beim Wechsel des `display`-Typs von `none` zu einem anderen Typ ausgelöst.
-- [`transition-behavior: allow-discrete`](/de/docs/Web/CSS/transition-behavior) muss in der {{cssxref("transition-property")}}-Deklaration (oder im {{cssxref("transition")}}-Kurzschreibweise) gesetzt werden, um `display`-Übergänge zu aktivieren.
+- [`@starting-style`](/de/docs/Web/CSS/@starting-style) bietet Startwerte für Eigenschaften, von denen Sie beim ersten Anzeigen des animierten Elements wechseln möchten. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht beim ersten Stilupdate eines Elements ausgelöst oder wenn sich der `display` Typ von `none` in einen anderen Typ ändert.
+- [`transition-behavior: allow-discrete`](/de/docs/Web/CSS/transition-behavior) muss für die Deklaration {{cssxref("transition-property")}} (oder die {{cssxref("transition")}} Kurzform) aktiviert werden, um `display` Übergänge zu ermöglichen.
 
-Für Beispiele zu Übergängen der `display`-Eigenschaft siehe die Seiten [`@starting-style`](/de/docs/Web/CSS/@starting-style#examples) und [`transition-behavior`](/de/docs/Web/CSS/transition-behavior#examples).
+Weitere Beispiele für die Übergangsanwendung der `display` Eigenschaft finden Sie auf den Seiten [`@starting-style`](/de/docs/Web/CSS/@starting-style#examples) und [`transition-behavior`](/de/docs/Web/CSS/transition-behavior#examples).
 
 ## Barrierefreiheit
 
 ### display: none
 
-Die Verwendung eines `display`-Wertes von `none` auf einem Element entfernt es aus dem [Barrierefreiheit-Baum](/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#accessibility_apis). Dies führt dazu, dass das Element und alle seine Nachkommenelemente nicht mehr von Screenreader-Technologie angekündigt werden.
+Die Verwendung eines `display` Wertes von `none` auf einem Element entfernt es aus dem [Barrierefreiheit-Baum](/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#accessibility_apis). Dadurch wird das Element und alle seine Nachkommen-Elemente nicht mehr von Bildschirmlesetechnologie angekündigt.
 
-Wenn Sie das Element visuell ausblenden möchten, ist eine zugänglichere Alternative die Verwendung [einer Kombination von Eigenschaften](https://webaim.org/techniques/css/invisiblecontent/), um es visuell vom Bildschirm zu entfernen, es aber dennoch für unterstützende Technologien wie Screenreader verfügbar zu machen.
+Wenn Sie das Element visuell ausblenden möchten, ist eine zugänglichere Alternative die Verwendung [einer Kombination von Eigenschaften](https://webaim.org/techniques/css/invisiblecontent/), um es visuell vom Bildschirm zu entfernen, es jedoch assistiven Technologien wie Bildschirmlesegeräten zur Verfügung zu stellen.
 
-Während `display: none` Inhalte aus dem Barrierefreiheit-Baum ausblendet, werden Elemente, die ausgeblendet sind, aber von sichtbaren Elementen `aria-describedby` oder `aria-labelledby`-Attribute referenziert werden, immer noch unterstützenden Technologien zugänglich gemacht.
+Während `display: none` Inhalte aus dem Barrierefreiheit-Baum ausblendet, werden Elemente, die versteckt sind, aber von sichtbaren Elementen durch `aria-describedby` oder `aria-labelledby` Attribute referenziert werden, assistiven Technologien zugänglich gemacht.
 
 ### display: contents
 
-Aktuelle Implementierungen in einigen Browsern werden jedes Element mit einem `display`-Wert von `contents` (aber die Nachkommen bleiben) aus dem [Barrierefreiheit-Baum](/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#accessibility_apis) entfernen. Dies führt dazu, dass das Element selbst nicht mehr von Screenreader-Technologie angekündigt wird. Dies ist ein fehlerhaftes Verhalten gemäß der [CSS-Spezifikation](https://drafts.csswg.org/css-display/#valdef-display-contents).
+Aktuelle Implementierungen in einigen Browsern entfernen aus dem [Barrierefreiheit-Baum](/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#accessibility_apis) jedes Element mit einem `display` Wert von `contents` (aber Nachkommen bleiben). Dies führt dazu, dass das Element selbst nicht mehr von Bildschirmlesegeräten angekündigt wird. Dies ist falsches Verhalten nach der [CSS-Spezifikation](https://drafts.csswg.org/css-display/#valdef-display-contents).
 
-- [Mehr zugängliches Markup mit display: contents | Hidde de Vries](https://hidde.blog/more-accessible-markup-with-display-contents/)
+- [Barrierefreieres Markup mit display: contents | Hidde de Vries](https://hidde.blog/more-accessible-markup-with-display-contents/)
 - [Display: Contents Is Not a CSS Reset | Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
 
 ### Tabellen
 
-In einigen Browsern wird das Ändern des `display`-Wertes eines {{HTMLElement("table")}}-Elements in `block`, `grid` oder `flex` dessen Darstellung im [Barrierefreiheit-Baum](/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#accessibility_apis) verändern. Dies führt dazu, dass die Tabelle nicht mehr korrekt von Screenreader-Technologie angekündigt wird.
+In einigen Browsern ändert die Änderung des `display` Werts eines {{HTMLElement("table")}} Elements in `block`, `grid` oder `flex` seine Darstellung im [Barrierefreiheit-Baum](/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#accessibility_apis). Dies führt dazu, dass die Tabelle nicht mehr ordnungsgemäß von Bildschirmlesetechnologie angekündigt wird.
 
-- [Kurze Notiz, was CSS-Anzeigeeigenschaften mit Tabellensemantik machen — The Paciello Group](https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/)
-- [Ausgeblendete Inhalte für bessere Barrierefreiheit | Go Make Things](https://gomakethings.com/hidden-content-for-better-a11y/)
-- [MDN Verständnis von WCAG, Leitlinie 1.3 Erläuterungen](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways)
+- [Kurze Notiz darüber, was CSS-Display-Eigenschaften mit Tabellensemantik machen — The Paciello Group](https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/)
+- [Versteckte Inhalte für bessere Barrierefreiheit | Go Make Things](https://gomakethings.com/hidden-content-for-better-a11y/)
+- [MDN Understanding WCAG, Richtlinie 1.3 Erklärungen](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways)
 - [Verständnis des Erfolgskriteriums 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
 
 ## Formale Definition
@@ -331,11 +331,11 @@ In einigen Browsern wird das Ändern des `display`-Wertes eines {{HTMLElement("t
 
 ## Beispiele
 
-### Vergleich von display-Werten
+### Display-Wertvergleich
 
-In diesem Beispiel haben wir zwei Block-Container-Elemente, jedes mit drei Inline-Kindern. Darunter haben wir ein Auswahlmenü, mit dem Sie verschiedene `display`-Werte auf die Container anwenden können, sodass Sie vergleichen und gegenüberstellen können, wie die verschiedenen Werte das Layout des Elements und das seiner Kinder beeinflussen.
+In diesem Beispiel haben wir zwei Block-Container-Elemente, jedes mit drei Inline-Kindern. Darunter haben wir ein Auswahlmenü, das Ihnen erlaubt, verschiedene `display` Werte auf die Container anzuwenden, sodass Sie vergleichen und kontrastieren können, wie die verschiedenen Werte das Layout des Elements und seiner Kinder beeinflussen.
 
-Wir haben {{cssxref("padding")}} und {{cssxref("background-color")}} auf die Container und ihre Kinder angewendet, damit es einfacher ist, den Effekt der display-Werte zu sehen.
+Wir haben {{cssxref("padding")}} und {{cssxref("background-color")}} auf den Containern und ihren Kindern hinzugefügt, damit es leichter ist, den Effekt der Anzeigewerte zu sehen.
 
 #### HTML
 
@@ -439,7 +439,7 @@ updateDisplay();
 
 {{EmbedLiveSample('display_value_comparison','100%', 440)}}
 
-Beachten Sie, dass einige Multi-Schlüsselwort-Werte zur Veranschaulichung hinzugefügt werden, die folgende Äquivalente haben:
+Beachten Sie, dass einige Multi-Schlüsselwort-Werte zur Veranschaulichung hinzugefügt wurden, die folgende Entsprechungen haben:
 
 - `block` = `block flow`
 - `inline` = `inline flow`
@@ -454,7 +454,7 @@ Beachten Sie, dass einige Multi-Schlüsselwort-Werte zur Veranschaulichung hinzu
 - `inline-flex` = `inline flex`
 - `inline-grid` = `inline grid`
 
-Weitere Beispiele finden Sie auf den Seiten für jeden separaten Anzeigetyp unter [Gruppierte Werte](#gruppierte_werte).
+Mehr Beispiele finden Sie auf den Seiten für jeden separaten Anzeigetyp unter [Gruppierte Werte](#gruppierte_werte).
 
 ## Spezifikationen
 
@@ -466,7 +466,8 @@ Weitere Beispiele finden Sie auf den Seiten für jeden separaten Anzeigetyp unte
 
 ## Siehe auch
 
-- [Block und Inline-Layout im normalen Fluss](/de/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)
-- [Einführung in Formatierungskontexte](/de/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts)
 - {{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}
 - {{CSSxRef("grid")}}, {{CSSxRef("flex")}}
+- SVG {{SVGAttr("display")}} Attribut
+- [Block-und-Inline-Layout im normalen Fluss](/de/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)
+- [Einführung in Formatierungskontexte](/de/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts)
diff --git a/files/de/web/css/dominant-baseline/index.md b/files/de/web/css/dominant-baseline/index.md
index 1b0f96c80..47096ea92 100644
--- a/files/de/web/css/dominant-baseline/index.md
+++ b/files/de/web/css/dominant-baseline/index.md
@@ -2,25 +2,25 @@
 title: dominant-baseline
 slug: Web/CSS/dominant-baseline
 l10n:
-  sourceCommit: 30d512a2224b300bbc5fec3aaa07f4e48f87784e
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`dominant-baseline`** [CSS](/de/docs/Web/CSS) Eigenschaft gibt die spezifische {{Glossary("Baseline/Typography", "Baseline")}} an, die verwendet wird, um den Text und die Inhalte auf Inline-Ebene der Box auszurichten. Sie gibt auch die Standard-Ausrichtungsbaseline von Boxen an, die an der Baseline-Ausrichtung im Ausrichtungskontext der Box beteiligt sind. Falls vorhanden, überschreibt sie das {{SVGAttr("dominant-baseline")}} Attribut der Form.
+Die **`dominant-baseline`** [CSS](/de/docs/Web/CSS) Eigenschaft gibt die spezifische {{Glossary("Baseline/Typography", "Baseline")}} an, die verwendet wird, um den Text und den Inhalt auf Inline-Ebene der Box auszurichten. Sie gibt auch die Standardausrichtungsbaseline von allen Boxen an, die an der Baseline-Ausrichtung im Ausrichtungskontext der Box teilnehmen. Falls vorhanden, überschreibt sie das {{SVGAttr("dominant-baseline")}}-Attribut der Form.
 
-Baselines werden aus der Baseline-Tabelle der Schriftart ausgewählt. Falls keine Baseline-Tabelle in der nominalen Schrift vorhanden ist oder die Baseline-Tabelle keinen Eintrag für die gewünschte Baseline hat, kann der Browser Heuristiken verwenden, um die Position der gewünschten Baseline zu bestimmen.
+Baselines werden aus der Schrift-Baseline-Tabelle ausgewählt. Wenn es in der nominalen Schrift keine Baseline-Tabelle gibt oder wenn die Baseline-Tabelle keinen Eintrag für die gewünschte Baseline hat, kann der Browser Heuristiken verwenden, um die Position der gewünschten Baseline zu bestimmen.
 
-Die `dominant-baseline` Eigenschaft wird verwendet, um eine _scaled-baseline-table_ zu bestimmen oder neu zu bestimmen. Eine scaled-baseline-table ist ein zusammengesetzter Wert mit drei Komponenten:
+Die `dominant-baseline`-Eigenschaft wird verwendet, um eine _scaled-baseline-table_ zu bestimmen oder neu zu bestimmen. Eine scaled-baseline-table ist ein kombinierter Wert mit drei Komponenten:
 
-1. ein Baseline-Identifikator für die dominierende Baseline,
-2. eine Baseline-Tabelle und
-3. eine Schriftgröße der Baseline-Tabelle.
+1. ein Baseline-Identifikator für die dominante Baseline,
+2. eine Baseline-Tabelle, und
+3. eine Baseline-Tabellenschriftgröße.
 
-Einige Werte von `dominant-baseline` bestimmen alle drei Werte neu. Andere legen nur die Schriftgröße der Baseline-Tabelle neu fest. Wenn der Anfangswert `auto` ein unerwünschtes Ergebnis liefern würde, kann diese Eigenschaft verwendet werden, um die gewünschte scaled-baseline-table explizit festzulegen.
+Einige Werte von `dominant-baseline` bestimmen alle drei Werte neu. Andere stellen nur die Schriftgröße der Baseline-Tabelle wieder her. Wenn der Initialwert `auto` ein unerwünschtes Ergebnis liefert, kann diese Eigenschaft verwendet werden, um die gewünschte scaled-baseline-table explizit festzulegen.
 
 > [!NOTE]
-> Die `dominant-baseline` Eigenschaft hat nur Auswirkungen auf die {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, und {{SVGElement("tspan")}} SVG-Elemente.
+> Die `dominant-baseline`-Eigenschaft hat nur eine Wirkung auf die {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}} und {{SVGElement("tspan")}} SVG-Elemente.
 
 ## Syntax
 
@@ -50,38 +50,38 @@ dominant-baseline: unset;
 
 - `auto`
 
-  - : Falls diese Eigenschaft auf ein {{SVGElement("text")}} Element angewendet wird, hängt der berechnete Wert vom Wert des {{SVGAttr("writing-mode")}} Attributs ab.
+  - : Wenn diese Eigenschaft auf ein {{SVGElement("text")}}-Element angewendet wird, hängt der berechnete Wert vom Wert des {{SVGAttr("writing-mode")}}-Attributs ab.
 
-    Wenn der {{SVGAttr("writing-mode")}} horizontal ist, ist der Wert der dominanten Baseline-Komponente `alphabetic`. Andernfalls, wenn der {{SVGAttr("writing-mode")}} vertikal ist, ist der Wert der dominanten Baseline-Komponente `central`.
+    Wenn der {{SVGAttr("writing-mode")}} horizontal ist, dann ist der Wert der dominanten Baseline-Komponente `alphabetic`. Andernfalls, wenn der {{SVGAttr("writing-mode")}} vertikal ist, ist der Wert der dominanten Baseline-Komponente `central`.
 
-    Falls diese Eigenschaft auf ein {{SVGElement("tspan")}}, {{SVGElement("tref")}}, oder {{SVGElement("textPath")}} Element angewendet wird, bleiben die dominante Baseline und die Baseline-Tabelle die gleichen wie bei dem Eltern-Textinhaltselement.
+    Wenn diese Eigenschaft auf ein {{SVGElement("tspan")}}, {{SVGElement("tref")}} oder {{SVGElement("textPath")}}-Element angewendet wird, bleiben die dominante Baseline- und die Baseline-Tabellenkomponenten gleich wie die des übergeordneten Textinhalts-Elements.
 
-    Wenn der berechnete {{SVGAttr("baseline-shift")}} Wert tatsächlich die Baseline verschiebt, wird die Schriftgröße der Baseline-Tabelle auf den Wert des {{SVGAttr("font-size")}} Attributs auf dem Element gesetzt, auf dem das `dominant-baseline` Attribut vorkommt, andernfalls bleibt die Schriftgröße der Baseline-Tabelle die gleiche wie bei diesem Element.
+    Wenn der berechnete {{SVGAttr("baseline-shift")}}-Wert tatsächlich die Baseline verschiebt, wird die Schriftgröße der Baseline-Tabelle auf den Wert des {{SVGAttr("font-size")}}-Attributs des Elements, auf dem das `dominant-baseline`-Attribut vorkommt, eingestellt, andernfalls bleibt die Schriftgröße der Baseline-Tabelle gleich wie die des Elements.
 
-    Wenn kein Elternelement für den Textinhalt vorhanden ist, wird der scaled-baseline-table Wert wie für {{SVGElement("text")}} Elemente konstruiert.
+    Wenn kein übergeordnetes Textinhalts-Element vorhanden ist, wird der Wert der scaled-baseline-table wie für {{SVGElement("text")}}-Elemente konstruiert.
 
 - `alphabetic`
-  - : Der Baseline-Identifikator für die dominante Baseline wird auf `alphabetic` gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der `alphabetic` Baseline-Tabelle in der Schriftart konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG Attributs des Elements oder, falls gesetzt, des CSS {{cssxref('font-size')}} geändert.
+  - : Der Baseline-Identifikator für die dominante Baseline wird auf `alphabetic` gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der `alphabetic` Baseline-Tabelle in der Schrift konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG-Attributs des Elements oder der CSS {{cssxref('font-size')}}, falls gesetzt, geändert.
 - `central`
-  - : Der Baseline-Identifikator für die dominante Baseline wird auf `central` gesetzt. Die abgeleitete Baseline-Tabelle wird aus den definierten Baselines in der Baseline-Tabelle der Schriftart konstruiert. Diese Schriftart-Baseline-Tabelle wird in folgender Prioritätsreihenfolge von Baseline-Tabellennamen gewählt: `ideographic`, `alphabetic`, `hanging`, `mathematical`. Die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG-Attributs oder des CSS {{cssxref('font-size')}} des Elements geändert, falls gesetzt.
+  - : Der Baseline-Identifikator für die dominante Baseline wird auf `central` gesetzt. Die abgeleitete Baseline-Tabelle wird aus den definierten Baselines in der Baseline-Tabelle der Schrift konstruiert. Diese Schrift-Baseline-Tabelle wird mit der folgenden Prioritätenreihenfolge von Baseline-Tabellennamen gewählt: `ideographic`, `alphabetic`, `hanging`, `mathematical`. Die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG-Attributs des Elements oder der CSS {{cssxref('font-size')}}, falls gesetzt, geändert.
 - `hanging`
-  - : Der Baseline-Identifikator für die dominante Baseline wird auf `hanging` gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der `hanging` Baseline-Tabelle in der Schriftart konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG-Attributs oder des {{cssxref('font-size')}} CSS-Eigenschaft bei diesem Element geändert.
+  - : Der Baseline-Identifikator für die dominante Baseline wird auf `hanging` gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der `hanging` Baseline-Tabelle in der Schrift konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG-Attributs oder der {{cssxref('font-size')}} CSS-Eigenschaft auf diesem Element geändert.
 - `ideographic`
-  - : Der Baseline-Identifikator für die dominante Baseline wird auf `ideographic` gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der `ideographic` Baseline-Tabelle in der Schriftart konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG-Attributs des Elements oder des CSS {{cssxref('font-size')}} geändert, falls gesetzt.
+  - : Der Baseline-Identifikator für die dominante Baseline wird auf `ideographic` gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der `ideographic` Baseline-Tabelle in der Schrift konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG-Attributs des Elements oder der CSS {{cssxref('font-size')}}, falls gesetzt, geändert.
 - `mathematical`
-  - : Der Baseline-Identifikator für die dominante Baseline wird auf `mathematical` gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der `mathematical` Baseline-Tabelle in der Schriftart konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG-Attributs des Elements oder des CSS {{cssxref('font-size')}} geändert, falls gesetzt.
+  - : Der Baseline-Identifikator für die dominante Baseline wird auf `mathematical` gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der `mathematical` Baseline-Tabelle in der Schrift konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG-Attributs des Elements oder der CSS {{cssxref('font-size')}}, falls gesetzt, geändert.
 - `middle`
-  - : Der Baseline-Identifikator für die dominante Baseline wird auf `middle` gesetzt. Die abgeleitete Baseline-Tabelle wird aus den definierten Baselines in einer Baseline-Tabelle in der Schriftart konstruiert. Diese Schriftart-Baseline-Tabelle wird in folgender Prioritätsreihenfolge von Baseline-Tabellennamen gewählt: `ideographic`, `alphabetic`, `hanging`, `mathematical`. Die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG-Attributs des Elements oder des CSS {{cssxref('font-size')}} geändert, falls gesetzt.
+  - : Der Baseline-Identifikator für die dominante Baseline wird auf `middle` gesetzt. Die abgeleitete Baseline-Tabelle wird aus den definierten Baselines in einer Baseline-Tabelle in der Schrift konstruiert. Diese Schrift-Baseline-Tabelle wird mit der folgenden Prioritätenreihenfolge von Baseline-Tabellennamen gewählt: `ideographic`, `alphabetic`, `hanging`, `mathematical`. Die Schriftgröße der Baseline-Tabelle wird auf den Wert des {{SVGAttr('font-size')}} SVG-Attributs des Elements oder der CSS {{cssxref('font-size')}}, falls gesetzt, geändert.
 - `text-bottom`
-  - : Die _line-under_ Kante wird als Baseline verwendet, was normalerweise die untere Kante der Em-Box der Schrift ist.
+  - : Die _line-under_-Kante wird als Baseline verwendet, was normalerweise die untere Kante der Em-Box der Schrift ist.
 - `text-top`
-  - : Die _line-over_ Kante wird als Baseline verwendet, was normalerweise die obere Kante der Em-Box der Schrift ist.
+  - : Die _line-over_-Kante wird als Baseline verwendet, was normalerweise die obere Kante der Em-Box der Schrift ist.
 
-## Formelle Definition
+## Formale Definition
 
 {{CSSInfo}}
 
-## Formelle Syntax
+## Formale Syntax
 
 {{csssyntax}}
 
@@ -155,4 +155,4 @@ text:nth-of-type(8) {
 - {{cssxref('alignment-baseline')}}
 - {{cssxref('text-anchor')}}
 - {{cssxref('vertical-align')}}
-- {{SVGAttr('dominant-baseline')}} SVG-Attribut
+- SVG {{SVGAttr('dominant-baseline')}} Attribut
diff --git a/files/de/web/css/filter/index.md b/files/de/web/css/filter/index.md
index 2df7e1596..461474c44 100644
--- a/files/de/web/css/filter/index.md
+++ b/files/de/web/css/filter/index.md
@@ -2,14 +2,14 @@
 title: filter
 slug: Web/CSS/filter
 l10n:
-  sourceCommit: 5178e1e7c9edf0c9c652275ae62f090042ce2422
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`filter`** [CSS](/de/docs/Web/CSS)-Eigenschaft wendet grafische Effekte wie Unschärfe oder Farbänderung auf ein Element an. Filter werden häufig verwendet, um die Darstellung von Bildern, Hintergründen und Rahmen anzupassen.
+Die **`filter`** [CSS](/de/docs/Web/CSS)-Eigenschaft wendet grafische Effekte wie Unschärfe oder Farbverschiebung auf ein Element an. Filter werden häufig verwendet, um die Darstellung von Bildern, Hintergründen und Rahmen anzupassen.
 
-Mehrere [Funktionen](#funktionen), wie `blur()` und `contrast()`, stehen zur Verfügung, um vordefinierte Effekte zu erzielen.
+Mehrere [Funktionen](#funktionen), wie `blur()` und `contrast()`, stehen zur Verfügung, um voreingestellte Effekte zu erzielen.
 
 {{EmbedInteractiveExample("pages/css/filter.html")}}
 
@@ -46,13 +46,13 @@ filter: revert-layer;
 filter: unset;
 ```
 
-Mit einer Funktion verwenden Sie folgendes:
+Bei Verwendung einer Funktion gilt Folgendes:
 
 ```css-nolint
 filter: <filter-function> [<filter-function>]* | none;
 ```
 
-Sie können `url()` verwenden, um auf ein [SVG-Filterelement](/de/docs/Web/SVG/Element/filter) zu verweisen. Für einen Verweis auf ein SVG {{SVGElement("filter")}}-Element verwenden Sie die folgende Syntax:
+Sie können `url()` verwenden, um ein [SVG-Filterelement](/de/docs/Web/SVG/Element/filter) zu referenzieren. Für einen Verweis auf ein SVG-{{SVGElement("filter")}}-Element verwenden Sie die folgende Syntax:
 
 ```css
 filter: url(file.svg#filter-element-id);
@@ -60,13 +60,13 @@ filter: url(file.svg#filter-element-id);
 
 ## Funktionen
 
-Die `filter`-Eigenschaft wird als `none` oder eine oder mehrere der unten aufgeführten Funktionen angegeben. Wenn der Parameter einer Funktion ungültig ist, gibt die Funktion `none` zurück. Außer wenn notiert, akzeptieren die Funktionen, die einen Wert in Prozent ausdrücken (wie in `34%`), auch den Wert als Dezimalzahl (wie in `0.34`).
+Die `filter`-Eigenschaft wird als `none` oder eine oder mehrere der unten aufgeführten Funktionen angegeben. Wenn der Parameter für eine Funktion ungültig ist, ergibt die Funktion `none`. Mit Ausnahme der genannten Fälle akzeptieren die Funktionen, die einen Wert mit Prozentzeichen (z.B. `34%`) annehmen, auch den Wert als Dezimalwert (z.B. `0.34`).
 
-Wenn die Werte der `filter`-Eigenschaft mehrere Funktionen enthalten, werden die Filter in der angegebenen Reihenfolge angewendet.
+Wenn die Werte der `filter`-Eigenschaft mehrere Funktionen enthalten, werden die Filter in der Reihenfolge angewendet.
 
 - {{cssxref("filter-function/blur", "blur()")}}
 
-  - : Wendet eine Gaußsche Unschärfe auf das Eingabebild an.
+  - : Wendet einen Gaußschen Weichzeichner auf das Eingabebild an.
 
     ```css
     filter: blur(5px);
@@ -74,7 +74,7 @@ Wenn die Werte der `filter`-Eigenschaft mehrere Funktionen enthalten, werden die
 
 - {{cssxref("filter-function/brightness", "brightness()")}}
 
-  - : Wendet einen linearen Multiplikator auf das Eingabebild an, sodass es heller oder dunkler erscheint. Die Werte sind lineare Multiplikatoren auf den Effekt, wobei `0%` ein komplett schwarzes Bild erzeugt, `100%` keine Wirkung hat und Werte über `100%` das Bild aufhellen.
+  - : Wendet einen linearen Multiplikator auf das Eingabebild an, wodurch es mehr oder weniger hell erscheint. Die Werte sind lineare Multiplikatoren für den Effekt, wobei `0%` ein komplett schwarzes Bild erzeugt, `100%` keinen Effekt hat und Werte über `100%` das Bild aufhellen.
 
     ```css
     filter: brightness(2);
@@ -82,7 +82,7 @@ Wenn die Werte der `filter`-Eigenschaft mehrere Funktionen enthalten, werden die
 
 - {{cssxref("filter-function/contrast", "contrast()")}}
 
-  - : Passt den Kontrast des Eingabebildes an. Ein Wert von `0%` macht das Bild grau, `100%` hat keine Wirkung und Werte über `100%` erzeugen einen Kontrast.
+  - : Passt den Kontrast des Eingabebildes an. Ein Wert von `0%` macht das Bild grau, `100%` hat keinen Effekt, und Werte über `100%` erhöhen den Kontrast.
 
     ```css
     filter: contrast(200%);
@@ -90,7 +90,7 @@ Wenn die Werte der `filter`-Eigenschaft mehrere Funktionen enthalten, werden die
 
 - {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
 
-  - : Wendet den Parameter `<shadow>` als Schlagschatten an, der den Konturen des Bildes folgt. Die Schattensyntax ähnelt `<box-shadow>` (definiert im [CSS Hintergründe- und Rahmen-Modul](/de/docs/Web/CSS/CSS_backgrounds_and_borders)), mit der Ausnahme, dass das Schlüsselwort `inset` und der Parameter `spread` nicht erlaubt sind. Wie bei allen `filter`-Eigenschaftswerten werden alle Filter nach `drop-shadow()` auf den Schatten angewendet.
+  - : Wendet den Parameter `<shadow>` als Schlagschatten an, wobei die Konturen des Bildes gefolgt werden. Die Schattensyntax ist ähnlich wie `<box-shadow>` (definiert im [CSS backgrounds and borders module](/de/docs/Web/CSS/CSS_backgrounds_and_borders)), mit der Ausnahme, dass das `inset`-Schlüsselwort und der `spread`-Parameter nicht erlaubt sind. Wie bei allen `filter`-Eigenschaftswerten werden alle Filter nach dem `drop-shadow()` auf den Schatten angewendet.
 
     ```css
     filter: drop-shadow(16px 16px 10px black);
@@ -98,7 +98,7 @@ Wenn die Werte der `filter`-Eigenschaft mehrere Funktionen enthalten, werden die
 
 - {{cssxref("filter-function/grayscale", "grayscale()")}}
 
-  - : Konvertiert das Bild in Graustufen. Ein Wert von `100%` ist komplett in Graustufen. Der Anfangswert von `0%` belässt das Eingabebild unverändert. Werte zwischen `0%` und `100%` erzeugen lineare Multiplikatoren auf den Effekt.
+  - : Konvertiert das Bild in Graustufen. Ein Wert von `100%` ist komplett in Graustufen. Der Anfangswert von `0%` lässt das Eingabebild unverändert. Werte zwischen `0%` und `100%` erzeugen lineare Multiplikatoren für den Effekt.
 
     ```css
     filter: grayscale(100%);
@@ -106,7 +106,7 @@ Wenn die Werte der `filter`-Eigenschaft mehrere Funktionen enthalten, werden die
 
 - {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
 
-  - : Wendet eine Farbtonrotation an. Der `<angle>`-Wert definiert die Anzahl der Grad um den Farbkreis, die die Eingabemuster angepasst werden. Ein Wert von `0deg` belässt das Eingabebild unverändert.
+  - : Wendet eine Farbtonrotation an. Der `<angle>`-Wert definiert die Anzahl der Grad um den Farbkreis, bei denen die Eingabeproben angepasst werden. Ein Wert von `0deg` lässt die Eingabe unverändert.
 
     ```css
     filter: hue-rotate(90deg);
@@ -114,7 +114,7 @@ Wenn die Werte der `filter`-Eigenschaft mehrere Funktionen enthalten, werden die
 
 - {{cssxref("filter-function/invert", "invert()")}}
 
-  - : Kehrt die Muster im Eingabebild um. Ein Wert von `100%` kehrt das Bild komplett um. Ein Wert von `0%` belässt das Eingabebild unverändert. Werte zwischen `0%` und `100%` haben lineare Multiplikatoren auf den Effekt.
+  - : Kehrt die Proben im Eingabebild um. Ein Wert von `100%` invertiert das Bild vollständig. Ein Wert von `0%` lässt die Eingabe unverändert. Werte zwischen `0%` und `100%` haben lineare Multiplikatoren für den Effekt.
 
     ```css
     filter: invert(100%);
@@ -122,7 +122,7 @@ Wenn die Werte der `filter`-Eigenschaft mehrere Funktionen enthalten, werden die
 
 - {{cssxref("filter-function/opacity", "opacity()")}}
 
-  - : Wendet Transparenz an. `0%` macht das Bild komplett transparent und `100%` belässt das Bild unverändert.
+  - : Wendet Transparenz an. `0%` macht das Bild komplett transparent und `100%` lässt das Bild unverändert.
 
     ```css
     filter: opacity(50%);
@@ -130,7 +130,7 @@ Wenn die Werte der `filter`-Eigenschaft mehrere Funktionen enthalten, werden die
 
 - {{cssxref("filter-function/saturate", "saturate()")}}
 
-  - : Sättigt das Bild, wobei `0%` vollkommen ungesättigt ist, `100%` das Bild unverändert lässt und Werte über `100%` die Sättigung erhöhen.
+  - : Sättigt das Bild, wobei `0%` komplett entsättigt ist, `100%` das Bild unverändert lässt und Werte über `100%` die Sättigung erhöhen.
 
     ```css
     filter: saturate(200%);
@@ -138,13 +138,13 @@ Wenn die Werte der `filter`-Eigenschaft mehrere Funktionen enthalten, werden die
 
 - {{cssxref("filter-function/sepia", "sepia()")}}
 
-  - : Konvertiert das Bild in Sepia, wobei ein Wert von `100%` das Bild komplett in Sepia umwandelt und `0%` keine Änderung bewirkt.
+  - : Konvertiert das Bild in Sepia, wobei ein Wert von `100%` das Bild komplett in Sepia und `0%` keine Änderung vornimmt.
 
     ```css
     filter: sepia(100%);
     ```
 
-## Funktionen kombinieren
+## Kombinieren von Funktionen
 
 Sie können beliebig viele Funktionen kombinieren, um die Darstellung zu manipulieren. Die Filter werden in der angegebenen Reihenfolge angewendet. Das folgende Beispiel verbessert den Kontrast und die Helligkeit des Bildes:
 
@@ -154,9 +154,9 @@ filter: contrast(175%) brightness(103%);
 
 ### Interpolation
 
-Wenn animiert, und sowohl die Anfangs- als auch die Endfilterlisten die gleiche Länge haben, ohne {{cssxref("url_value", "&lt;url&gt;")}} in der gleichen Reihenfolge, wird jede ihrer Filterfunktionen gemäß den spezifischen Regeln der Filterfunktion {{Glossary("interpolation", "interpoliert")}}.
+Wenn animiert, und sowohl die Anfangs- als auch die Endfilter eine Funktionsliste gleicher Länge ohne {{cssxref("url_value", "&lt;url&gt;")}} in derselben Reihenfolge haben, wird jede ihrer Filterfunktionen entsprechend den spezifischen Regeln der Filterfunktion {{Glossary("interpolation", "interpoliert")}}.
 
-Wenn die Listen unterschiedliche Längen haben, werden die fehlenden entsprechenden Filterfunktionen der längeren Liste am Ende der kürzeren Liste hinzugefügt. Die hinzugefügten Funktionen verwenden ihre initialen, keine Filteränderung erreichenden Werte. Alle aufgelisteten Filter werden dann gemäß den spezifischen Regeln der Filterfunktion interpoliert. Andernfalls wird diskrete Interpolation verwendet.
+Wenn die Filterlisten unterschiedlich lang sind, werden die fehlenden entsprechenden Filterfunktionen aus der längeren Liste dem Ende der kürzeren Liste hinzugefügt. Die hinzugefügten Funktionen verwenden ihre anfänglichen, ohne Filtermodifikation Werte. Alle aufgeführten Filter werden dann entsprechend den spezifischen Regeln der Filterfunktion interpoliert. Andernfalls wird diskrete Interpolation verwendet.
 
 ## Formale Definition
 
@@ -168,9 +168,9 @@ Wenn die Listen unterschiedliche Längen haben, werden die fehlenden entsprechen
 
 ## Beispiele
 
-### Filterfunktionen anwenden
+### Anwenden von Filterfunktionen
 
-Die `filter`-Eigenschaft wird auf das zweite Bild angewendet, wobei sowohl das Bild als auch sein Rahmen ausgegraut und unscharf gemacht werden.
+Die `filter`-Eigenschaft wird auf das zweite Bild angewendet, wodurch sowohl das Bild als auch der Rahmen verblasst und unscharf wird.
 
 ```css
 img {
@@ -189,7 +189,7 @@ img:nth-of-type(2) {
 
 {{EmbedLiveSample('Applying_filter_functions','100%','229px')}}
 
-### Filterfunktionen wiederholen
+### Wiederholte Filterfunktionen
 
 Filterfunktionen werden in der Reihenfolge des Erscheinens angewendet. Dieselbe Filterfunktion kann wiederholt werden.
 
@@ -221,7 +221,7 @@ Filterfunktionen werden in der Reihenfolge des Erscheinens angewendet. Dieselbe
 
 {{EmbedLiveSample('Repeating_filter_functions','100%','229px')}}
 
-Die Filter werden in der angegebenen Reihenfolge angewendet. Deshalb haben die Schlagschatten nicht die gleiche Farbe: Der Farbton des ersten Schattens wird durch die `hue-rotate()`-Funktion verändert, der zweite jedoch nicht.
+Die Filter werden in der angegebene Reihenfolge angewendet. Dies ist der Grund, warum die Schlagschatten nicht die gleiche Farbe haben: der Farbton des ersten Schlagschattens wird durch die `hue-rotate()`-Funktion verändert, der zweite jedoch nicht.
 
 ## Spezifikationen
 
@@ -233,8 +233,9 @@ Die Filter werden in der angegebenen Reihenfolge angewendet. Deshalb haben die S
 
 ## Siehe auch
 
-- CSS {{cssxref("backdrop-filter")}}-Eigenschaft
-- CSS [Verrechnungen und Überblendungen](/de/docs/Web/CSS/CSS_compositing_and_blending)-Modul, einschließlich der CSS {{cssxref("background-blend-mode")}}- und {{cssxref("mix-blend-mode")}}-Eigenschaften.
-- Die CSS {{cssxref("mask")}}-Eigenschaft
-- [SVG](/de/docs/Web/SVG), einschließlich des SVG {{SVGElement("filter")}}-Elements und des SVG {{SVGAttr("filter")}}-Attributs.
-- [Anwendung von SVG-Effekten auf HTML-Inhalte](/de/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
+- {{cssxref("backdrop-filter")}}
+- {{cssxref("mask")}}
+- SVG {{SVGAttr("filter")}} Attribut
+- CSS [Compositing und Blending](/de/docs/Web/CSS/CSS_compositing_and_blennding) Modul, einschließlich der CSS {{cssxref("background-blend-mode")}} und {{cssxref("mix-blend-mode")}} Eigenschaften.
+- [SVG](/de/docs/Web/SVG), einschließlich des SVG {{SVGElement("filter")}} Elements und des SVG {{SVGAttr("filter")}} Attributs.
+- [Anwenden von SVG-Effekten auf HTML-Inhalt](/de/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
diff --git a/files/de/web/css/font-family/index.md b/files/de/web/css/font-family/index.md
index 3e9d21bd2..0cd00ca0b 100644
--- a/files/de/web/css/font-family/index.md
+++ b/files/de/web/css/font-family/index.md
@@ -2,22 +2,22 @@
 title: font-family
 slug: Web/CSS/font-family
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`font-family`** [CSS](/de/docs/Web/CSS) Eigenschaft spezifiziert eine priorisierte Liste von einem oder mehreren Schriftfamiliennamen und/oder generischen Familiennamen für das ausgewählte Element.
+Die **`font-family`** [CSS](/de/docs/Web/CSS) Eigenschaft legt eine priorisierte Liste von einem oder mehreren Schriftfamiliennamen und/oder generischen Familiennamen für das ausgewählte Element fest.
 
 {{EmbedInteractiveExample("pages/css/font-family.html")}}
 
-Werte werden durch Kommas getrennt, um Alternativen anzuzeigen. Der Browser wählt die erste Schriftart in der Liste aus, die installiert oder mithilfe eines {{CSSxRef("@font-face")}}-At-Regels heruntergeladen werden kann.
+Werte sind durch Kommas getrennt, um anzuzeigen, dass sie Alternativen sind. Der Browser wählt die erste Schriftart in der Liste, die installiert ist oder die durch eine {{CSSxRef("@font-face")}} Regel heruntergeladen werden kann.
 
-Es ist oft praktisch, die Kurzschreibweiseigenschaft {{CSSxRef("font")}} zu verwenden, um `font-size` und andere schriftbezogene Eigenschaften auf einmal festzulegen.
+Es ist oft praktisch, die Kurzschreibweise {{CSSxRef("font")}} zu verwenden, um `font-size` und andere schriftbezogene Eigenschaften auf einmal festzulegen.
 
-Sie sollten immer mindestens einen generischen Familiennamen in eine `font-family`-Liste aufnehmen, da es keine Garantie dafür gibt, dass eine bestimmte Schriftart verfügbar ist. Dies ermöglicht es dem Browser, bei Bedarf eine akzeptable Ersatzschrift auszuwählen.
+Sie sollten immer mindestens einen generischen Familiennamen in einer `font-family` Liste einschließen, da es keine Garantie gibt, dass eine bestimmte Schriftart verfügbar ist. Dies ermöglicht es dem Browser, bei Bedarf eine akzeptable Ersatzschriftart auszuwählen.
 
-Die `font-family`-Eigenschaft spezifiziert eine Liste von Schriftarten, von höchster Priorität bis zur niedrigsten. Die Schriftauswahl _hört nicht_ bei der ersten Schrift in der Liste auf, die auf dem System des Benutzers vorhanden ist. Vielmehr wird die Schriftauswahl _zeichenweise_ durchgeführt, sodass, wenn eine verfügbare Schriftart kein Glyphe für ein erforderliches Zeichen hat, die folgenden Schriftarten versucht werden. Wenn eine Schriftart nur in einigen [Stilen](/de/docs/Web/CSS/font-style), [Varianten](/de/docs/Web/CSS/font-variant) oder [Größen](/de/docs/Web/CSS/font-size) verfügbar ist, können diese Eigenschaften auch beeinflussen, welche Schriftfamilie gewählt wird.
+Die `font-family` Eigenschaft gibt eine Liste von Schriftarten an, von höchster zu niedrigster Priorität. Die Schriftauswahl _stoppt nicht_ bei der ersten Schriftart in der Liste, die auf dem System des Benutzers vorhanden ist. Vielmehr erfolgt die Schriftauswahl _ein Zeichen nach dem anderen_, sodass, wenn eine verfügbare Schriftart kein Glyphe für ein benötigtes Zeichen hat, die nachfolgenden Schriftarten ausprobiert werden. Wenn eine Schriftart nur in einigen [Stilen](/de/docs/Web/CSS/font-style), [Varianten](/de/docs/Web/CSS/font-variant) oder [Größen](/de/docs/Web/CSS/font-size) verfügbar ist, können diese Eigenschaften auch beeinflussen, welche Schriftfamilie gewählt wird.
 
 ## Syntax
 
@@ -49,7 +49,7 @@ font-family: revert-layer;
 font-family: unset;
 ```
 
-Die `font-family`-Eigenschaft listet eine oder mehrere Schriftfamilien auf, getrennt durch Kommas. Jede Schriftfamilie wird entweder als `<family-name>` oder als `<generic-name>`-Wert angegeben.
+Die `font-family` Eigenschaft listet eine oder mehrere Schriftfamilien auf, getrennt durch Kommas. Jede Schriftfamilie wird entweder als `<family-name>` oder `<generic-name>` Wert angegeben.
 
 Das folgende Beispiel listet zwei Schriftfamilien auf, die erste mit einem `<family-name>` und die zweite mit einem `<generic-name>`:
 
@@ -61,25 +61,25 @@ font-family: "Gill Sans Extrabold", sans-serif;
 
 - `<family-name>`
 
-  - : Der Name einer Schriftfamilie. Dies muss entweder ein einzelner {{cssxref("string")}}-Wert oder eine durch Leerzeichen getrennte Sequenz von {{cssxref("custom-ident")}}-Werten sein. Zeichenfolgenwerte müssen in Anführungszeichen gesetzt werden, können jedoch jedes Unicode-Zeichen enthalten. Benutzerdefinierte Bezeichner sind nicht in Anführungszeichen, aber bestimmte Zeichen müssen maskiert werden.
+  - : Der Name einer Schriftfamilie. Dieser muss entweder ein einzelner {{cssxref("string")}} Wert oder eine durch Leerzeichen getrennte Folge von {{cssxref("custom-ident")}} Werten sein. Zeichenfolgenwerte müssen in Anführungszeichen stehen, dürfen jedoch jedes Unicode-Zeichen enthalten. Benutzerdefinierte Identifikatoren werden nicht in Anführungszeichen gesetzt, aber bestimmte Zeichen müssen entkommen werden.
 
-    Es ist eine gute Praxis, Schriftfamiliennamen, die Leerzeichen, Ziffern oder andere Interpunktionszeichen als Bindestriche enthalten, zu zitieren.
+    Es ist eine gute Praxis, Schriftfamiliennamen, die Leerzeichen, Ziffern oder Satzzeichen außer Bindestrichen enthalten, in Anführungszeichen zu setzen.
 
     Siehe auch [Gültige Familiennamen](#gültige_familiennamen).
 
 - `<generic-name>`
 
-  - : Generische Schriftfamilien sind ein Fallback-Mechanismus, eine Möglichkeit, die Absicht des Stylesheet-Autors zu bewahren, wenn keine der angegebenen Schriften verfügbar sind. Generische Familiennamen sind Schlüsselwörter und dürfen nicht in Anführungszeichen gesetzt werden. Eine generische Schriftfamilie sollte das letzte Element in der Liste der Schriftfamiliennamen sein. Die folgenden Schlüsselwörter sind definiert:
+  - : Generische Schriftfamilien sind ein Rückfallmechanismus, ein Mittel, um einen Teil der Absicht des Stylesheet-Autors zu bewahren, wenn keine der angegebenen Schriftarten verfügbar ist. Generische Familiennamen sind Schlüsselwörter und dürfen nicht in Anführungszeichen gesetzt werden. Eine generische Schriftfamilie sollte das letzte Element in der Liste der Schriftfamiliennamen sein. Die folgenden Schlüsselwörter sind definiert:
 
     - `serif`
 
-      - : Glyphen haben abschließende Striche, aufgeweitete oder sich verjüngende Enden oder haben tatsächlich geschriebene Endungen.
+      - : Glyphen haben abschließende Striche, gebogene oder sich verjüngende Enden oder haben tatsächliche serifenartige Endungen.
 
         Zum Beispiel: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.
 
     - `sans-serif`
 
-      - : Glyphen haben einfache Endstriche.
+      - : Glyphen haben Strichenden, die schlicht sind.
 
         Zum Beispiel: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.
 
@@ -91,32 +91,32 @@ font-family: "Gill Sans Extrabold", sans-serif;
 
     - `cursive`
 
-      - : Glyphen in Kursivschriften haben allgemein entweder verbundene Striche oder andere kursive Merkmale über die von kursiven Schrifttypen hinaus. Die Glyphen sind teilweise oder vollständig verbunden und das Ergebnis sieht mehr nach handschriftlichem Schreibzeichen als nach gedruckter Schrift aus.
+      - : Glyphen in kursiven Schriften haben normalerweise entweder verbindende Striche oder andere kursivartige Merkmale über die von Schrägschrift-Typen hinaus. Die Glyphen sind teilweise oder vollständig verbunden, und das Ergebnis sieht mehr nach handgeschriebenem Stift- oder Pinseltext als nach gedrucktem Buchstabenwerk aus.
 
         Zum Beispiel: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive.
 
     - `fantasy`
 
-      - : Fantasy-Schriften sind in erster Linie dekorative Schriften, die spielerische Darstellungen von Zeichen enthalten.
+      - : Fantasy-Schriften sind hauptsächlich dekorative Schriften, die spielerische Darstellungen von Zeichen enthalten.
 
         Zum Beispiel: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
 
     - `system-ui`
-      - : Glyphen stammen aus der Standardschrift der Benutzeroberfläche auf einer bestimmten Plattform. Da sich die typografischen Traditionen weltweit stark unterscheiden, wird dieses Generikum für Schriften bereitgestellt, die nicht eindeutig in die anderen Generika passen.
+      - : Glyphen stammen von der Standardschriftart für Benutzeroberflächen auf einer bestimmten Plattform. Da sich typografische Traditionen weltweit stark unterscheiden, wird dieses generische für Schriften bereitgestellt, die sich nicht eindeutig in die anderen Generika einordnen lassen.
     - `ui-serif`
-      - : Die Standardschrift mit Serifen der Benutzeroberfläche.
+      - : Die Standardschriftart der Benutzeroberfläche für Serifen.
     - `ui-sans-serif`
-      - : Die Standardschrift ohne Serifen der Benutzeroberfläche.
+      - : Die Standardschriftart der Benutzeroberfläche für serifenlose Schriftarten.
     - `ui-monospace`
-      - : Die standardmäßig feste Breite der Benutzeroberfläche.
+      - : Die Standardschriftart der Benutzeroberfläche für Monospace.
     - `ui-rounded`
-      - : Die Standardschrift der Benutzeroberfläche, die abgerundete Merkmale hat.
+      - : Die Standardschriftart der Benutzeroberfläche mit abgerundeten Merkmalen.
     - `math`
-      - : Dies ist für die besonderen stilistischen Anliegen der Darstellung von Mathematik: Hoch- und Tiefstellungen, Klammern, die mehrere Zeilen überschreiten, verschachtelte Ausdrücke und doppelt gestrichene Glyphen mit unterschiedlichen Bedeutungen.
+      - : Dies ist für die besonderen stilistischen Anforderungen der Darstellung von Mathematik: Hoch- und Tiefstellungen, Klammern, die mehrere Zeilen umfassen, verschachtelte Ausdrücke und doppel-strichige Glyphe mit unterschiedlichen Bedeutungen.
     - `emoji`
-      - : Schriften, die speziell zum Rendern von Emojis entworfen wurden.
+      - : Schriften, die speziell für die Darstellung von Emoji entworfen wurden.
     - `fangsong`
-      - : Ein besonderer Stil chinesischer Zeichen, der zwischen den Serif-Stil Song und Kursiv-Stil Kai Formen liegt. Dieser Stil wird oft für Regierungsdokumente verwendet.
+      - : Ein bestimmter Stil chinesischer Zeichen, der zwischen serifenartigem Song- und kursivem Kai-Stil liegt. Dieser Stil wird häufig für Regierungsdokumente verwendet.
 
 ## Formale Definition
 
@@ -128,7 +128,7 @@ font-family: "Gill Sans Extrabold", sans-serif;
 
 ## Beispiele
 
-### Einige gebräuchliche Schriftfamilien
+### Einige häufige Schriftfamilien
 
 ```css
 .serif {
@@ -204,7 +204,7 @@ font-family: #POUND, sans-serif;
 font-family: Hawaii 5-0, sans-serif;
 ```
 
-Das folgende Beispiel ist technisch gültig, wird aber nicht empfohlen:
+Das folgende Beispiel ist technisch gültig, wird jedoch nicht empfohlen:
 
 ```css
 font-family:
@@ -224,4 +224,5 @@ font-family:
 
 - {{cssxref("font-style")}}
 - {{cssxref("font-weight")}}
+- SVG {{SVGAttr("font-family")}} Attribut
 - [Lernen: Grundlegende Text- und Schriftgestaltung](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
diff --git a/files/de/web/css/font-size-adjust/index.md b/files/de/web/css/font-size-adjust/index.md
index fc8b10471..a2bd30c79 100644
--- a/files/de/web/css/font-size-adjust/index.md
+++ b/files/de/web/css/font-size-adjust/index.md
@@ -2,14 +2,14 @@
 title: font-size-adjust
 slug: Web/CSS/font-size-adjust
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`font-size-adjust`** [CSS](/de/docs/Web/CSS) Eigenschaft bietet eine Möglichkeit, die Größe der Kleinbuchstaben relativ zur Größe der Großbuchstaben zu ändern, was die gesamte {{cssxref("font-size")}} definiert. Diese Eigenschaft ist nützlich in Situationen, in denen ein Font-Fallback auftreten kann.
+Die **`font-size-adjust`** [CSS](/de/docs/Web/CSS)-Eigenschaft bietet eine Möglichkeit, die Größe von Kleinbuchstaben im Verhältnis zur Größe von Großbuchstaben zu modifizieren, was die allgemeine {{cssxref("font-size")}} definiert. Diese Eigenschaft ist nützlich in Situationen, in denen ein Ersatzschrifttyp auftreten kann.
 
-Die Lesbarkeit kann ein Problem sein, wenn die bevorzugte {{cssxref("font-family")}} nicht verfügbar ist und die Ersatzschriftart einen signifikant anderen Aspektwert hat (Höhe der Kleinbuchstaben geteilt durch die Schriftgröße). Die Lesbarkeit von Schriften, insbesondere bei kleinen Schriftgrößen, wird mehr durch die Größe der Kleinbuchstaben als durch die Größe der Großbuchstaben bestimmt. Die `font-size-adjust` Eigenschaft ist nützlich, um die Schriftgröße von Ersatzschriften anzupassen und den Aspektwert über Schriften hinweg konsistent zu halten, sodass der Text unabhängig von der verwendeten Schrift ähnlich erscheint.
+Lesbarkeit kann ein Problem werden, wenn die bevorzugte {{cssxref("font-family")}} nicht verfügbar ist und die Ersatzschriftart einen signifikant anderen Aspektwert (Höhe der Kleinbuchstaben durch Schriftgröße geteilt) hat. Die Lesbarkeit von Schriftarten, insbesondere bei kleinen Schriftgrößen, wird mehr von der Größe der Kleinbuchstaben als von der Größe der Großbuchstaben bestimmt. Die Eigenschaft `font-size-adjust` ist nützlich, um die Schriftgröße von Ersatzschriften anzupassen, um den Aspektwert über verschiedene Schriften hinweg konsistent zu halten und sicherzustellen, dass der Text unabhängig von der verwendeten Schrift ähnlich erscheint.
 
 ## Syntax
 
@@ -35,54 +35,54 @@ font-size-adjust: unset;
 
 ### Werte
 
-Die `font-size-adjust` Eigenschaft nimmt als Wert das Schlüsselwort `none`, einen (`<number>` oder `from-font`), oder zwei (`<font-metric>` und entweder `<number>` oder `from-font`) Werte an.
+Die Eigenschaft `font-size-adjust` nimmt den Schlüsselwortwert `none`, einen (`<number>` oder `from-font`) oder zwei (`<font-metric>` und entweder `<number>` oder `from-font`) Werte an.
 
 - `none`
-  - : Es wird keine Anpassung an den `font-size` Wert der Ersatzschrift vorgenommen.
+  - : Es wird keine Anpassung an den `font-size`-Wert für die Ersatzschrift vorgenommen.
 - `<font-metric>` {{optional_inline}}
 
-  - : Gibt die bevorzugte Schriftmetrik an, die zur Anpassung der Schriftgröße der Ersatzschrift verwendet werden soll. Dieser Parameter akzeptiert eines der unten aufgeführten Schlüsselwörter. Es ist ein optionaler Parameter, und `ex-height` wird verwendet, wenn keine `<font-metric>` angegeben ist.
+  - : Gibt die bevorzugte Schriftmetrik an, die zur Anpassung der Schriftgröße der Ersatzschrift verwendet werden soll. Dieser Parameter akzeptiert eines der unten aufgeführten Schlüsselwörter. Er ist ein optionaler Parameter, und `ex-height` wird verwendet, wenn keine `<font-metric>` angegeben ist.
 
     - `ex-height`
-      - : Verwendet das Verhältnis von x-Höhe (Höhe des Kleinbuchstabens "x" in einer Schrift) zu Schriftgröße (Aspektwert), um die Ersatzschriftgröße anzupassen. Dieser Schlüsselwortwert wird verwendet, um Kleinbuchstaben über Schriften hinweg zu normalisieren.
+      - : Verwendet das Verhältnis der x-Höhe (Höhe des Kleinbuchstabens "x" in einer Schriftart) zur Schriftgröße (Aspektwert), um die Ersatzschriftgröße anzupassen. Dieser Schlüsselwortwert wird verwendet, um Kleinbuchstaben über Schriften hinweg zu normalisieren.
     - `cap-height`
-      - : Verwendet das Verhältnis von Cap-Höhe (Höhe der Großbuchstaben) zu Schriftgröße, um die Ersatzschriftgröße anzupassen. Dieser Schlüsselwortwert wird verwendet, um Großbuchstaben über Schriften hinweg zu normalisieren.
+      - : Verwendet das Verhältnis der Kapitälchenhöhe (Höhe der Großbuchstaben) zur Schriftgröße, um die Ersatzschriftgröße anzupassen. Dieser Schlüsselwortwert wird verwendet, um Großbuchstaben über Schriften hinweg zu normalisieren.
     - `ch-width`
-      - : Verwendet das Verhältnis der Laufweite (horizontaler Platz, den ein Zeichen in einer Schrift einnimmt) des Zeichens "0" (NULL, U+0030) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um die horizontale schmale Dickte von Schriften zu normalisieren.
+      - : Verwendet das Verhältnis der Voranschrittsbreite (horizontaler Raum, den ein Zeichen in einer Schrift einnimmt) des Zeichens "0" (NULL, U+0030) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um die horizontale enge Teilung von Schriften zu normalisieren.
     - `ic-width`
-      - : Verwendet das Verhältnis der Laufweite des Zeichens "水" (CJK Wasserideogramm, U+6C34) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um die horizontale breite Dickte von Schriften, insbesondere solcher, die CJK (Chinesisch, Japanisch, Koreanisch) Zeichen enthalten, zu normalisieren.
+      - : Verwendet das Verhältnis der Voranschrittsbreite des Zeichens "水" (CJK-Wasserideogramm, U+6C34) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um die horizontale weite Teilung von Schriften zu normalisieren, insbesondere bei Schriften, die CJK-Zeichen (Chinesisch, Japanisch, Koreanisch) enthalten.
     - `ic-height`
-      - : Verwendet das Verhältnis der Schreibhöhe (vertikaler Raum, den ein Zeichen in einer Schrift einnimmt) des Zeichens "水" (CJK Wasserideogramm, U+6C34) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um die vertikale breite Dickte von Schriften, insbesondere solcher, die CJK Zeichen enthalten, zu normalisieren.
+      - : Verwendet das Verhältnis der Voranschritthöhe (vertikaler Raum, den ein Zeichen in einer Schrift einnimmt) des Zeichens "水" (CJK-Wasserideogramm, U+6C34) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um die vertikale weite Teilung von Schriften zu normalisieren, insbesondere bei Schriften, die CJK-Zeichen enthalten.
 
 - {{cssxref("&lt;number&gt;")}}
 
-  - : Passt die verwendete Schriftgröße je nach angegebener `<font-metric>` an. Wenn keine `<font-metric>` angegeben ist (wobei der Standardwert `ex-height` verwendet wird), passt der `<number>` Wert die Schriftgröße der Ersatzschrift so an, dass ihre x-Höhe das angegebene Vielfache der Schriftgröße ist. Dieser Wert sollte im Allgemeinen dem Aspektwert (Verhältnis von x-Höhe zu Schriftgröße) der bevorzugten Schrift entsprechen. Dies bedeutet, dass die bevorzugte Schrift, wenn sie verfügbar ist, unabhängig von der Unterstützung der Browser für `font-size-adjust` konsistent angezeigt wird.
+  - : Passt die verwendete Schriftgröße abhängig vom angegebenen `<font-metric>` an. Wenn kein `<font-metric>` angegeben ist (in diesem Fall wird der Standardwert `ex-height` verwendet), passt der `<number>`-Wert die Schriftgröße der Ersatzschrift an, damit ihre x-Höhe das angegebene Vielfache der Schriftgröße ist. Dieser Wert sollte im Allgemeinen dem Aspektwert (Verhältnis der x-Höhe zur Schriftgröße) der bevorzugten Schriftart entsprechen. Das bedeutet, dass die bevorzugte Schrift, wenn verfügbar, über Browser hinweg konsistent angezeigt wird, unabhängig von deren Unterstützung für `font-size-adjust`.
 
-    Wenn ein `<font-metric>` Wert angegeben ist, passt der `<number>` Wert die Schriftgröße gemäß der gewählten `<font-metric>` an, um ein konsistentes Erscheinungsbild für die angegebene Schriftmetrik über verschiedene Schriften hinweg zu gewährleisten.
+    Wenn ein `<font-metric>`-Wert angegeben ist, passt der `<number>`-Wert die Schriftgröße entsprechend dem gewählten `<font-metric>` an, um ein konsistentes Erscheinungsbild der angegebenen Schriftmetrik über verschiedene Schriften hinweg zu gewährleisten.
 
-    Der `<number>` Wert akzeptiert jede Zahl von `0` bis unendlich. `0` ergibt Text von null Höhe (das heißt, der Text ist versteckt). Negative Werte sind ungültig.
+    Der `<number>`-Wert akzeptiert jede Zahl von `0` bis unendlich. `0` ergibt Text mit null Höhe (das heißt, der Text ist verborgen). Negative Werte sind ungültig.
 
 - `from-font`
-  - : Verwendet den `<number>` Wert für die angegebene `<font-metric>` aus der ersten verfügbaren Schrift.
+  - : Verwendet den `<number>`-Wert für den angegebenen `<font-metric>` aus der zuerst verfügbaren Schriftart.
 
 ## Beschreibung
 
-Um die Kompatibilität mit Browsern zu gewährleisten, die `font-size-adjust` nicht unterstützen, wird diese Eigenschaft als numerischer Multiplikator der {{cssxref("font-size")}} Eigenschaft angegeben. Diese Zahl sollte im Allgemeinen dem Aspektwert der bevorzugten Schrift entsprechen.
+Um die Kompatibilität mit Browsern zu gewährleisten, die `font-size-adjust` nicht unterstützen, wird diese Eigenschaft als numerischer Multiplikator der {{cssxref("font-size")}}-Eigenschaft angegeben. Diese Zahl sollte im Allgemeinen dem Aspektwert der bevorzugten Schriftart entsprechen.
 
 > [!NOTE]
-> Wenn die angegebene `<font-metric>` in [`@font-face`](/de/docs/Web/CSS/@font-face) überschrieben wurde, z.B. durch die Verwendung des [`size-adjust`](/de/docs/Web/CSS/@font-face/size-adjust) Descriptors, wird die überschriebenen Metrik in der `font-size-adjust` Berechnung verwendet. Das bedeutet, dass wenn `font-size-adjust` und `size-adjust` zusammen angewendet werden, `size-adjust` keine Wirkung hat.
+> Wenn das angegebene `<font-metric>` in [`@font-face`](/de/docs/Web/CSS/@font-face) überschrieben wurde, z. B. durch Verwendung des [`size-adjust`](/de/docs/Web/CSS/@font-face/size-adjust)-Deskriptors, dann wird die überschreibene Metrik in der `font-size-adjust`-Berechnung verwendet. Dies bedeutet, dass wenn `font-size-adjust` und `size-adjust` zusammen angewendet werden, `size-adjust` keine Wirkung hat.
 
-Die angepasste Schriftgröße wird mit der Formel `u  =  ( m / m′ ) s` berechnet, wobei:
+Die angepasste Schriftgröße wird anhand der Formel `u  =  ( m / m′ ) s` berechnet, wobei:
 
 - `m` das Verhältnis der angegebenen `<font-metric>` zur bevorzugten Schriftgröße ist.
 
 - `m′` das Verhältnis der entsprechenden `<font-metric>` zur Ersatzschriftgröße ist.
 
-- `s` der Wert der `font-size` Eigenschaft ist.
+- `s` der Wert der `font-size`-Eigenschaft ist.
 
 - `u` die neue, angepasste Schriftgröße für die Ersatzschrift ist.
 
-Betrachten Sie dieses Beispiel, um zu sehen, wie die angepasste Schriftgröße berechnet wird. Eine bevorzugte Schrift hat eine `font-size` von `12px` (`s`), und das Verhältnis von `cap-height` zur Schriftgröße beträgt `0.20` (`m`). Das Verhältnis von `cap-height` zur Schriftgröße in der Ersatzschrift beträgt `0.15` (`m′`). Der `font-size-adjust` Wert wurde als `cap-height 0.20` angegeben. Wenn die primäre Schrift nicht verfügbar ist, wird die angepasste Schriftgröße der Ersatzschrift auf `16px` (`(0.20 / 0.15) * 12`) berechnet. Dies stellt sicher, dass die `cap-height` der Ersatzschrift derjenigen der bevorzugten Schrift ähnelt, wenn sie angezeigt wird.
+Betrachten Sie dieses Beispiel, um zu sehen, wie die angepasste Schriftgröße berechnet wird. Eine bevorzugte Schrift hat eine `font-size` von `12px` (`s`) und das Verhältnis von `cap-height` zu Schriftgröße beträgt `0.20` (`m`). Das Verhältnis von `cap-height` zu Schriftgröße in der Ersatzschrift beträgt `0.15` (`m′`). Der `font-size-adjust`-Wert wurde als `cap-height 0.20` angegeben. Falls die primäre Schriftart nicht verfügbar ist, wird die angepasste Schriftgröße der Ersatzschrift auf `16px` berechnet (`(0.20 / 0.15) * 12`). Dies stellt sicher, dass die `cap-height` der Ersatzschrift ähnlich der der bevorzugten Schrift ist, wenn sie angezeigt wird.
 
 ## Formale Definition
 
@@ -94,11 +94,11 @@ Betrachten Sie dieses Beispiel, um zu sehen, wie die angepasste Schriftgröße b
 
 ## Beispiele
 
-### Normalisierung der Schriftgröße durch Kleinbuchstaben und Großbuchstaben
+### Normalisierung der Schriftgröße durch Klein- und Großbuchstaben
 
-Dieses Beispiel zeigt, wie die `font-size-adjust` Eigenschaft verwendet werden kann, um den gleichen Aspektwert über Schriften hinweg beizubehalten. Die Verdana-Schrift hat einen relativ hohen Aspektwert von `0.545`, was bedeutet, dass die Kleinbuchstaben relativ hoch im Vergleich zu den Großbuchstaben sind. Dadurch erscheint der Text in kleinen Schriftgrößen lesbar. Die Times-Schrift hat jedoch einen niedrigeren Aspektwert von `0.447`, sodass der Text bei kleinen Größen weniger lesbar ist. Wenn Verdana die bevorzugte Schrift ist und Times die Ersatzschrift, kann das Angeben der `font-size-adjust` Eigenschaft helfen, den gleichen Aspektwert in Times beizubehalten. Wenn die Schrift auf Times zurückfällt, wird der Text ein ähnliches Maß an Lesbarkeit beibehalten, wie es mit Verdana der Fall wäre.
+Dieses Beispiel zeigt, wie die `font-size-adjust`-Eigenschaft verwendet werden kann, um denselben Aspektwert über Schriftarten hinweg beizubehalten. Die Verdana-Schriftart hat einen relativ hohen Aspektwert von `0.545`, was bedeutet, dass die Kleinbuchstaben im Vergleich zu den Großbuchstaben relativ hoch sind. Dies macht den Text in kleinen Schriftgrößen lesbar. Die Times-Schrift hat jedoch einen niedrigeren Aspektwert von `0.447`, sodass der Text bei kleinen Größen weniger lesbar ist. Wenn Verdana die bevorzugte Schrift und Times die Ersatzschrift ist, kann durch Angabe der `font-size-adjust`-Eigenschaft der gleiche Aspektwert in Times beibehalten werden. Fällt die Schrift auf Times zurück, behält der Text eine ähnliche Lesbarkeit bei, wie er mit Verdana hätte.
 
-In ähnlicher Weise ist das Verhältnis von Cap-Höhe zur Schriftgröße in Verdana `0.73` und in Times `0.66`. Wenn die `font-size-adjust` Eigenschaft auf Times angewendet wird, um ihre Großbuchstaben an das Verhältnis in Verdana anzupassen, zeigt die Times-Schrift eine angepasste Schriftgröße von ((0.73 / 0.66) \* 14) `15.48px`.
+Ebenso beträgt das Verhältnis von Kapitälchenhöhe zur Schriftgröße in Verdana `0.73` und in Times `0.66`. Wenn die `font-size-adjust`-Eigenschaft auf Times angewendet wird, um ihre Großbuchstaben an das Verhältnis in Verdana anzupassen, zeigt die Times-Schriftart in angepasster Schriftgröße ((0.73 / 0.66) \* 14) `15.48px` an.
 
 ```html
 <p class="verdana">
@@ -139,17 +139,18 @@ In ähnlicher Weise ist das Verhältnis von Cap-Höhe zur Schriftgröße in Verd
 }
 ```
 
-{{ EmbedLiveSample('Normalisierung der Schriftgröße durch Kleinbuchstaben und Großbuchstaben', 500, 200) }}
+{{ EmbedLiveSample('Normalizing font size by lowercase and uppercase letters', 500, 200) }}
 
-Ohne `font-size-adjust` in `B` könnte der Wechsel von Verdana Schrift zu Times Schrift zu einem merklichen Rückgang der Lesbarkeit aufgrund des niedrigeren Aspektwerts führen. In `C` beachten Sie, dass nur ein Wert für die `font-size-adjust` Eigenschaft angegeben wird, sodass der Standard `<font-metric>` Wert `ex-height` verwendet wird. `D` zeigt, wie die Schrift im Vergleich zu `A` aussehen würde, wenn ihre Großbuchstaben-Höhe angepasst wird.
+Ohne `font-size-adjust` in `B` könnte der Wechsel von der Verdana-Schrift zur Times-Schrift eine bemerkbare Abnahme der Lesbarkeit aufgrund ihres niedrigeren Aspektwerts verursachen.
+In `C`, beachten Sie, dass nur ein Wert für die `font-size-adjust`-Eigenschaft angegeben ist, sodass der Standardwert `<font-metric>` `ex-height` verwendet wird. `D` zeigt, wie die Schrift im Vergleich zu `A` aussehen würde, wenn ihre Großbuchstaben-Höhe angepasst wird.
 
 ### Bestimmung des Aspektwerts einer Schrift
 
-Für eine gegebene Schrift kann derselbe Inhalt in zwei nebeneinander liegenden [`<span>`](/de/docs/Web/HTML/Element/span) Elementen verwendet werden, um den Aspektwert der Schrift zu bestimmen. Wenn für den Inhalt in beiden Spans dieselbe Schriftgröße verwendet wird, passen die Spans zueinander, wenn der `font-size-adjust` Wert in einem Span für die gegebene Schrift genau ist.
+Für eine bestimmte Schriftart kann derselbe Inhalt in zwei nebeneinander liegenden [`<span>`](/de/docs/Web/HTML/Element/span)-Elementen verwendet werden, um den Aspektwert der Schrift zu bestimmen. Wenn dieselbe Schriftgröße für Inhalte in beiden Spans verwendet wird, stimmen die Spans überein, wenn der `font-size-adjust`-Wert in einem Span für die gegebene Schrift korrekt ist.
 
-Im folgenden Beispiel gibt es drei Paare von nebeneinander liegenden `<span>` Elementen, die jeweils den Buchstaben "b" enthalten. Das Ziel ist, die `font-size-adjust` Eigenschaft für den rechten `<span>` in jedem Paar so anzupassen, bis die Rahmen um die beiden Buchstaben übereinstimmen. Der resultierende `font-size-adjust` Wert kann als Aspektwert für die Schrift angesehen werden.
+Im folgenden Beispiel gibt es drei Paare von nebeneinander liegenden `<span>`-Elementen, die jeweils den Buchstaben „b“ enthalten. Das Ziel ist es, die `font-size-adjust`-Eigenschaft für das rechte `<span>` in jedem Paar anzupassen, bis die Ränder um die beiden Buchstaben herum ausgerichtet sind. Der resultierende `font-size-adjust`-Wert kann als Aspektwert für die Schrift angesehen werden.
 
-Ausgehend von `0.6` im ersten Paar und Anpassung auf `0.5` im zweiten, passen wir den `font-size-adjust` Eigenschaftswert weiter an, bis die Rahmen um die "b" Buchstaben im dritten Paar perfekt übereinanderliegen. In diesem Beispiel wird der Aspektwert als `0.482` bestimmt.
+Ausgehend von `0.6` im ersten Paar und einer Anpassung auf `0.5` im zweiten, passen wir den Wert der `font-size-adjust`-Eigenschaft an, bis die Ränder um die „b“-Buchstaben im dritten Paar perfekt ausgerichtet sind. In diesem Beispiel wird der Aspektwert als `0.482` bestimmt.
 
 ```html
 <div>
@@ -213,7 +214,7 @@ span {
 }
 ```
 
-{{ EmbedLiveSample('Bestimmung des Aspektwerts einer Schrift', 500, 120) }}
+{{ EmbedLiveSample('Determining the aspect value of a font', 500, 120) }}
 
 ## Spezifikationen
 
@@ -228,4 +229,5 @@ span {
 - {{cssxref("font-size")}}
 - {{cssxref("font-weight")}}
 - {{cssxref("@font-face/size-adjust", "size-adjust")}} `@font-face` Deskriptor
-- [Learn: Grundlegendes zu Text- und Schriftstilen](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
+- SVG {{SVGAttr("font-size-adjust")}} Attribut
+- [Lernen: Grundlegende Text- und Schriftgestaltung](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
diff --git a/files/de/web/css/font-size/index.md b/files/de/web/css/font-size/index.md
index 582380327..bc71ec43f 100644
--- a/files/de/web/css/font-size/index.md
+++ b/files/de/web/css/font-size/index.md
@@ -2,12 +2,12 @@
 title: font-size
 slug: Web/CSS/font-size
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`font-size`** [CSS](/de/docs/Web/CSS)-Eigenschaft legt die Größe der Schrift fest. Eine Änderung der Schriftgröße aktualisiert auch die Größen der schriftgrößenrelativen {{cssxref("&lt;length&gt;")}} Einheiten, wie `em`, `ex` usw.
+Die **`font-size`** [CSS](/de/docs/Web/CSS) Eigenschaft legt die Größe der Schriftart fest. Eine Änderung der Schriftgröße aktualisiert auch die Größen der schriftgrößenbezogenen {{cssxref("&lt;length&gt;")}} Einheiten, wie `em`, `ex` usw.
 
 {{EmbedInteractiveExample("pages/css/font-size.html")}}
 
@@ -50,48 +50,48 @@ font-size: unset;
 
 - `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `xxx-large`
 
-  - : [Absolute Größe](/de/docs/Web/CSS/absolute-size) Schlüsselwörter, basierend auf der Standardschriftgröße des Benutzers (die `medium` ist).
+  - : [Absolute Größen](/de/docs/Web/CSS/absolute-size) Schlüsselwörter, basierend auf der Standard-Schriftgröße des Nutzers (die `medium` ist).
 
 - `larger`, `smaller`
 
-  - : [Relative Größe](/de/docs/Web/CSS/relative-size) Schlüsselwörter. Die Schrift wird größer oder kleiner relativ zur Schriftgröße des Elternelements, ungefähr im Verhältnis, das zur Trennung der oben genannten Absolutgröße Schlüsselwörter verwendet wird.
+  - : [Relative Größen](/de/docs/Web/CSS/relative-size) Schlüsselwörter. Die Schrift ist größer oder kleiner im Verhältnis zur Schriftgröße des Elternelements, ungefähr im Verhältnis, das verwendet wird, um die oben genannten absoluten Größen zu trennen.
 
 - {{cssxref("&lt;length&gt;")}}
 
-  - : Ein positiver {{cssxref("&lt;length&gt;")}} Wert. Für die meisten schriftgrößenrelativen Einheiten (wie `em` und `ex`) ist die Schriftgröße relativ zur Schriftgröße des Elternelements.
+  - : Ein positiver {{cssxref("&lt;length&gt;")}} Wert. Bei den meisten schriftgrößenrelativen Einheiten (wie `em` und `ex`) ist die Schriftgröße relativ zur Schriftgröße des Elternelements.
 
-    Für schriftgrößenrelative Einheiten, die auf der Wurzel basieren (wie `rem`), ist die Schriftgröße relativ zur Größe der im {{HTMLElement("html")}} (Root) Element verwendeten Schrift.
+    Bei schriftgrößenrelativen Einheiten, die auf der Wurzel basieren (wie `rem`), ist die Schriftgröße relativ zur Schriftgröße des Inhalts im {{HTMLElement("html")}} (Root-) Element.
 
 - {{cssxref("&lt;percentage&gt;")}}
 
   - : Ein positiver {{cssxref("&lt;percentage&gt;")}} Wert, relativ zur Schriftgröße des Elternelements.
     > [!NOTE]
-    > Um die Barrierefreiheit zu maximieren, ist es generell am besten, Werte zu verwenden, die relativ zur Standardschriftgröße des Benutzers sind.
+    > Um die Barrierefreiheit zu maximieren, ist es im Allgemeinen am besten, Werte zu verwenden, die relativ zur Standard-Schriftgröße des Nutzers sind.
 
 - `math`
-  - : [Skalierungsregeln](https://w3c.github.io/mathml-core/#the-math-script-level-property) werden angewendet, wenn der berechnete Wert der `font-size` Eigenschaft für mathematische Elemente relativ zur `font-size` des umgebenden Elternteils ermittelt wird.
-    Siehe die [math-depth](/de/docs/Web/CSS/math-depth) Eigenschaft für weitere Informationen.
+  - : [Skalierungsregeln](https://w3c.github.io/mathml-core/#the-math-script-level-property) werden angewendet, wenn der berechnete Wert der `font-size` Eigenschaft für mathematische Elemente relativ zur `font-size` des enthaltenen Elternelements bestimmt wird.
+    Weitere Informationen finden Sie in der [math-depth](/de/docs/Web/CSS/math-depth) Eigenschaft.
 
 ## Beschreibung
 
-Es gibt mehrere Möglichkeiten, die Schriftgröße zu spezifizieren, einschließlich Schlüsselwörter oder numerische Werte für Pixel oder Ems. Wählen Sie die geeignete Methode basierend auf den Anforderungen der jeweiligen Webseite.
+Es gibt mehrere Möglichkeiten, die Schriftgröße anzugeben, einschließlich Schlüsselwörtern oder numerischen Werten für Pixel oder ems. Wählen Sie die geeignete Methode basierend auf den Anforderungen der jeweiligen Webseite.
 
 ### Schlüsselwörter
 
-Schlüsselwörter sind eine gute Möglichkeit, die Größe von Schriftarten im Web festzulegen. Indem Sie eine Schlüsselwortschriftgröße auf dem {{HTMLElement("body")}} Element festlegen, können Sie eine relative Schriftgröße überall auf der Seite einstellen, wodurch Sie die Schrift leicht auf der gesamten Seite vergrößern oder verkleinern können.
+Schlüsselwörter sind eine gute Möglichkeit, die Schriftgröße im Web festzulegen. Durch das Festlegen einer Schlüsselwort-Schriftgröße auf dem {{HTMLElement("body")}} Element, können Sie die relative Schriftgröße überall auf der Seite einstellen, was Ihnen die Möglichkeit gibt, die Schriftgröße auf der gesamten Seite leicht zu vergrößern oder zu verkleinern.
 
 ### Pixel
 
-Die Schriftgröße in Pixelwerten (`px`) festzulegen, ist eine gute Wahl, wenn Sie Pixelgenauigkeit benötigen. Ein px-Wert ist statisch. Dies ist eine betriebssystemunabhängige und plattformübergreifende Methode, um den Browsern buchstäblich mitzuteilen, dass sie die Buchstaben genau in der von Ihnen angegebenen Pixelhöhe rendern sollen. Die Ergebnisse können zwischen den Browsern leicht variieren, da sie möglicherweise unterschiedliche Algorithmen verwenden, um einen ähnlichen Effekt zu erzielen.
+Die Schriftgröße in Pixelwerten (`px`) festzulegen, ist eine gute Wahl, wenn Sie Pixelgenauigkeit benötigen. Ein px-Wert ist statisch. Dies ist eine betriebssystemunabhängige und browserübergreifende Möglichkeit, den Browsern buchstäblich anzuweisen, die Buchstaben genau in der von Ihnen angegebenen Anzahl von Pixeln in Höhe darzustellen. Die Ergebnisse können leicht variieren, da die Browser möglicherweise unterschiedliche Algorithmen verwenden, um einen ähnlichen Effekt zu erzielen.
 
-Schriftgrößeneinstellungen können auch miteinander kombiniert werden. Zum Beispiel, wenn ein Elternelement auf `16px` gesetzt ist und sein Kindelement auf `larger` gesetzt ist, wird das Kindelement größer als das Elternelement auf der Seite angezeigt.
+Schriftgrößeneinstellungen können auch in Kombination verwendet werden. Wenn ein Elternelement beispielsweise auf `16px` eingestellt ist und sein Kindelement auf `larger`, wird das Kindelement auf der Seite größer als das Elternelement angezeigt.
 
 > [!NOTE]
-> Schriftgrößen in `px` zu definieren, ist _[nicht barrierefrei](https://en.wikipedia.org/wiki/Web_accessibility)_, da der Benutzer die Schriftgröße in einigen Browsern nicht ändern kann. Zum Beispiel möchten Benutzer mit eingeschränktem Sehvermögen die Schriftgröße möglicherweise viel größer einstellen als die von einem Webdesigner gewählte Größe. Vermeiden Sie die Verwendung für Schriftgrößen, wenn Sie ein inklusives Design erstellen möchten.
+> Die Festlegung von Schriftgrößen in `px` ist _[nicht barrierefrei](https://en.wikipedia.org/wiki/Web_accessibility)_, da der Nutzer in einigen Browsern die Schriftgröße nicht ändern kann. Beispielsweise möchten Nutzer mit eingeschränktem Sehvermögen möglicherweise die Schriftgröße viel größer einstellen als die von einem Webdesigner gewählte Größe. Vermeiden Sie es, sie für Schriftgrößen zu verwenden, wenn Sie ein inklusives Design erstellen möchten.
 
 ### Ems
 
-Die Verwendung eines `em`-Werts erzeugt eine dynamische oder berechnete Schriftgröße (historisch wurde die `em`-Einheit von der Breite eines großen "M" in einer bestimmten Schriftart abgeleitet). Der numerische Wert fungiert als Multiplikator der `font-size`-Eigenschaft des Elements, auf dem sie verwendet wird. Betrachten Sie dieses Beispiel:
+Die Verwendung eines `em`-Werts schafft eine dynamische oder berechnete Schriftgröße (historisch gesehen wurde die `em`-Einheit von der Breite des Großbuchstabens "M" in einem bestimmten Schrifttyp abgeleitet). Der numerische Wert wirkt als Multiplikator der `font-size`-Eigenschaft des Elements, auf dem er verwendet wird. Betrachten Sie dieses Beispiel:
 
 ```css
 p {
@@ -99,21 +99,21 @@ p {
 }
 ```
 
-In diesem Fall ist die Schriftgröße der `<p>`-Elemente doppelt so groß wie die berechnete `font-size`, die von `<p>`-Elementen geerbt wird. Folglich ist eine `font-size` von `1em` gleich der berechneten `font-size` des Elements, auf dem sie verwendet wird.
+In diesem Fall wird die Schriftgröße von `<p>` Elementen das Doppelte der vererbten berechneten `font-size` von `<p>` Elementen sein. Im erweiterten Sinne ist eine `font-size` von `1em` gleich der berechneten `font-size` des Elements, auf dem sie verwendet wird.
 
-Wenn für keinen der Vorfahren des `<p>` eine `font-size` festgelegt wurde, entspricht `1em` der Standardschriftgröße des Browsers, die normalerweise `16px` beträgt. Folglich ist `1em` standardmäßig gleich `16px` und `2em` gleich `32px`. Wenn Sie beispielsweise eine `font-size` von 20px auf dem `<body>`-Element festlegen würden, dann wäre `1em` auf den `<p>`-Elementen stattdessen gleich `20px` und `2em` wäre gleich `40px`.
+Wenn auf keinem der Vorfahren der `<p>`-Elemente eine `font-size` festgelegt wurde, entspricht `1em` der Standardbrowser-Schriftgröße, die normalerweise `16px` beträgt. Somit ist `1em` standardmäßig äquivalent zu `16px` und `2em` zu `32px`. Wenn Sie beispielsweise eine `font-size` von 20px auf dem `<body>`-Element festlegen, dann wäre `1em` auf den `<p>`-Elementen stattdessen äquivalent zu `20px` und `2em` zu `40px`.
 
-Um den `em`-Wert für einen gewünschten Pixelwert zu berechnen, können Sie diese Formel verwenden:
+Um das `em`-Äquivalent für jeden benötigten Pixelwert zu berechnen, können Sie diese Formel verwenden:
 
 ```plain
 em = desired element pixel value / parent element font-size in pixels
 ```
 
-Angenommen, die `font-size` des `<body>` der Seite ist auf `16px` gesetzt. Wenn die gewünschte Schriftgröße `12px` beträgt, sollten Sie `0.75em` angeben (da 12/16 = 0.75). Ähnlich, wenn Sie eine Schriftgröße von `10px` wünschen, dann geben Sie `0.625em` an (10/16 = 0.625); für `22px` geben Sie `1.375em` an (22/16).
+Beispielsweise, wenn die `font-size` des `<body>` der Seite auf `16px` eingestellt ist, und die gewünschte Schriftgröße `12px` ist, sollten Sie `0.75em` angeben (weil 12/16 = 0.75). Wenn Sie eine Schriftgröße von `10px` wünschen, dann geben Sie `0.625em` an (10/16 = 0.625); für `22px`, `1.375em` (22/16).
 
-Das `em` ist eine sehr nützliche Einheit in CSS, da es seine Länge automatisch relativ zu der Schrift anpasst, die der Leser zu verwenden wählt.
+Das `em` ist eine sehr nützliche Einheit in CSS, da es seine Länge automatisch relativ zu der vom Leser gewählten Schrift anpasst.
 
-Ein wichtiger Fakt: em-Werte addieren sich. Nehmen Sie das folgende HTML und CSS:
+Ein wichtiger Punkt, den Sie beachten sollten: em-Werte kumulieren sich. Betrachten Sie das folgende HTML und CSS:
 
 ```css
 html {
@@ -134,13 +134,13 @@ Das Ergebnis ist:
 
 {{EmbedLiveSample("Ems", 400, 100)}}
 
-Angenommen, dass die Standardschriftgröße des Browsers 16px ist, würden die Wörter "outer" bei 25.6px gerendert, aber das Wort "inner" würde bei 40.96px gerendert. Dies liegt daran, dass die `font-size` des inneren {{HTMLElement("span")}} 1.6em ist, was relativ zur `font-size` seines Elternteils ist, das wiederum relativ zur `font-size` seines Elternteils ist. Dies wird oft als **Kaskadieren** bezeichnet.
+Angenommen, die Standard-`font-size` des Browsers beträgt 16px, würden die Wörter "outer" mit 25.6px gerendert, aber das Wort "inner" würde mit 40.96px gerendert. Dies liegt daran, dass die `font-size` des inneren {{HTMLElement("span")}} 1.6em beträgt, was relativ zur `font-size` seines Elternteils ist, die wiederum relativ zur `font-size` seines Elternteils ist. Dies wird oft als **Kumulative Effekt** bezeichnet.
 
 ### Rems
 
-`rem`-Werte wurden erfunden, um das Kaskadieren-Problem zu umgehen. `rem`-Werte sind relativ zum Wurzel `html` Element, nicht zum Elternelement. Mit anderen Worten, sie lassen Sie eine Schriftgröße relativ auf eine Weise spezifizieren, die nicht von der Größe des Elternelements beeinflusst wird, wodurch das Kaskadieren vermieden wird.
+`rem`-Werte wurden eingeführt, um das Problem der Kumulation zu umgehen. `rem`-Werte beziehen sich auf das Root-`html`-Element, nicht auf das Elternelement. Mit anderen Worten, es ermöglicht Ihnen, eine Schriftgröße auf relative Weise anzugeben, ohne von der Größe des Elternteils beeinflusst zu werden, wodurch die Kumulation eliminiert wird.
 
-Das folgende CSS ist fast identisch mit dem vorherigen Beispiel. Der einzige Unterschied besteht darin, dass die Einheit in `rem` geändert wurde.
+Das untenstehende CSS ist nahezu identisch mit dem vorherigen Beispiel. Die einzige Ausnahme ist, dass die Einheit in `rem` geändert wurde.
 
 ```css
 html {
@@ -151,7 +151,7 @@ span {
 }
 ```
 
-Dann wenden wir dieses CSS auf dasselbe HTML an, das so aussieht:
+Dann wenden wir dieses CSS auf dasselbe HTML an, welches so aussieht:
 
 ```html
 <span>Outer <span>inner</span> outer</span>
@@ -159,13 +159,13 @@ Dann wenden wir dieses CSS auf dasselbe HTML an, das so aussieht:
 
 {{EmbedLiveSample("Rems", 400, 100)}}
 
-In diesem Beispiel werden die Wörter "outer inner outer" alle bei 25.6px angezeigt (angenommen, dass die `font-size` des Browsers auf dem Standardwert von 16px belassen wurde).
+In diesem Beispiel werden die Wörter "outer inner outer" alle mit 25.6px angezeigt (angenommen, dass die `font-size` des Browsers auf dem Standardwert von 16px belassen wurde).
 
 ### Ex
 
-Ähnlich der `em` Einheit wird eine `font-size` eines Elements, die mit der `ex` Einheit festgelegt wird, berechnet oder dynamisch erstellt. Sie verhält sich auf genau die gleiche Weise, mit dem Unterschied, dass beim Festlegen der `font-size`-Eigenschaft mit `ex` Einheiten die `font-size` der x-Höhe der [ersten verfügbaren Schriftart](https://www.w3.org/TR/css-fonts-3/#first-available-font) verwendet wird. Der Zahlenwert multipliziert die vom Element ererbte `font-size` und die `font-size` kaskadiert relativ.
+Wie die `em`-Einheit ist eine mit der `ex`-Einheit eingestellte `font-size` eines Elements berechnet oder dynamisch. Sie verhält sich genau auf die gleiche Weise, außer dass beim Festlegen der `font-size`-Eigenschaft mit `ex`-Einheiten die `font-size` der x-Höhe der [ersten verfügbaren Schriftart](https://www.w3.org/TR/css-fonts-3/#first-available-font) entspricht, die auf der Seite verwendet wird. Der numerische Wert multipliziert die vererbte `font-size` des Elements und die `font-size` kumuliert relativ.
 
-Siehe den W3C Editor's Draft für eine detailliertere Beschreibung der [schriftgrößenrelativen Längeneinheiten](https://drafts.csswg.org/css-values-4/#font-relative-length) wie `ex`.
+Siehe den W3C Editor's Draft für eine detailliertere Beschreibung von [schriftbezogenen Längeneinheiten](https://drafts.csswg.org/css-values-4/#font-relative-length) wie `ex`.
 
 ## Formale Definition
 
@@ -177,7 +177,7 @@ Siehe den W3C Editor's Draft für eine detailliertere Beschreibung der [schriftg
 
 ## Beispiele
 
-### Schriftgrößen einstellen
+### Schriftgrößen festlegen
 
 #### CSS
 
@@ -224,4 +224,5 @@ Siehe den W3C Editor's Draft für eine detailliertere Beschreibung der [schriftg
 - {{cssxref("font-weight")}}
 - {{cssxref("math-depth")}}
 - {{cssxref("math-style")}}
-- [Lernen: Grundlegende Text- und Schriftgestaltung](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
+- SVG {{SVGAttr("font-size")}} Attribut
+- [Lernen: Grundlegende Text- und Schrift-Styling](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
diff --git a/files/de/web/css/font-stretch/index.md b/files/de/web/css/font-stretch/index.md
index 5a09e0206..fef1a7a48 100644
--- a/files/de/web/css/font-stretch/index.md
+++ b/files/de/web/css/font-stretch/index.md
@@ -2,16 +2,16 @@
 title: font-stretch
 slug: Web/CSS/font-stretch
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
 > [!NOTE]
-> Die `font-stretch`-Eigenschaft [wurde in den Spezifikationen in `font-width` umbenannt](https://drafts.csswg.org/css-fonts/#font-stretch-desc). Der Name `font-stretch` wurde als Alias für die `font-width`-Eigenschaft beibehalten.
-> Der neue Name `font-width` wird von keinem Browser unterstützt.
+> Die Eigenschaft `font-stretch` [wurde nun in den Spezifikationen in `font-width` umbenannt](https://drafts.csswg.org/css-fonts/#font-stretch-desc). Der Name `font-stretch` wurde als Alias für die Eigenschaft `font-width` beibehalten.
+> Der neue Name `font-width` wird von keinem Browser bisher unterstützt.
 
-Die **`font-stretch`**-Eigenschaft von [CSS](/de/docs/Web/CSS) wählt eine normale, schmalere oder weitere Schriftart aus einer Schriftartfamilie aus.
+Die **`font-stretch`** [CSS](/de/docs/Web/CSS) Eigenschaft wählt eine normale, komprimierte oder erweiterte Schriftart aus einer Schriftfamilie aus.
 
 {{EmbedInteractiveExample("pages/css/font-stretch.html")}}
 
@@ -42,23 +42,23 @@ font-stretch: revert-layer;
 font-stretch: unset;
 ```
 
-Diese Eigenschaft kann entweder als einzelnes `<font-stretch-css3>` Schlüsselwort oder als einzelner {{cssxref("&lt;percentage&gt;")}} Wert angegeben werden.
+Diese Eigenschaft kann als einzelner `<font-stretch-css3>` Schlüsselwortwert oder als einzelner {{cssxref("&lt;percentage&gt;")}} Wert angegeben werden.
 
 ### Werte
 
 - `normal`
-  - : Spezifiziert eine normale Schriftart.
+  - : Gibt eine normale Schriftart an.
 - `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`
-  - : Spezifiziert eine schmalere Schriftart als normal, wobei `ultra-condensed` am schmalsten ist.
+  - : Gibt eine komprimiertere Schriftart als normal an, wobei `ultra-condensed` die kompakteste ist.
 - `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`
-  - : Spezifiziert eine weitere Schriftart als normal, wobei `ultra-expanded` am weitesten ist.
+  - : Gibt eine erweiterte Schriftart als normal an, wobei `ultra-expanded` die breiteste ist.
 - `<percentage>`
 
-  - : Ein {{cssxref("&lt;percentage&gt;")}} Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diese Eigenschaft nicht zulässig.
+  - : Ein {{cssxref("&lt;percentage&gt;")}} Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diese Eigenschaft nicht erlaubt.
 
-### Zuordnung von Schlüsselwort zu numerischem Wert
+### Zuordnung von Schlüsselwörtern zu numerischen Werten
 
-Die folgende Tabelle zeigt die Zuordnung zwischen den `<font-stretch-css3>` Schlüsselwörtern und den numerischen Prozentsätzen:
+Die folgende Tabelle zeigt die Zuordnung zwischen den `<font-stretch-css3>` Schlüsselwortwerten und numerischen Prozentsätzen:
 
 | Schlüsselwort     | Prozentsatz |
 | ----------------- | ----------- |
@@ -74,15 +74,15 @@ Die folgende Tabelle zeigt die Zuordnung zwischen den `<font-stretch-css3>` Schl
 
 ## Beschreibung
 
-Einige Schriftarten bieten zusätzliche Schnitte, bei denen die Zeichen schmaler als der normale Schnitt (_schmale_ Schnitte) oder breiter als der normale Schnitt (_weite_ Schnitte) sind.
+Einige Schriftfamilien bieten zusätzliche Schriftvarianten, bei denen die Zeichen schmaler sind als die normale Variante (_condensed_ Varianten) oder breiter als die normale Variante (_expanded_ Varianten).
 
-Sie können `font-stretch` verwenden, um einen schmalen oder weiten Schnitt aus solchen Schriftarten auszuwählen. Wenn die verwendete Schriftart keine schmalen oder weiten Schnitte bietet, hat diese Eigenschaft keine Wirkung.
+Sie können `font-stretch` verwenden, um eine komprimierte oder erweiterte Variante aus solchen Schriftarten auszuwählen. Wenn die verwendete Schriftart keine komprimierten oder erweiterten Varianten bietet, hat diese Eigenschaft keine Wirkung.
 
-### Auswahl der Schriftart
+### Auswahl des Schriftschnitts
 
-Der ausgewählte Schnitt für einen gegebenen Wert von `font-stretch` hängt von den von der betreffenden Schriftart unterstützten Schnitten ab. Wenn die Schriftart keinen Schnitt bietet, der genau dem angegebenen Wert entspricht, dann weisen Werte unter 100% auf einen schmaleren Schnitt hin, und Werte gleich oder über 100% auf einen weiteren Schnitt.
+Die für einen gegebenen Wert von `font-stretch` ausgewählte Variante hängt von den unterstützten Varianten der betreffenden Schriftart ab. Wenn die Schriftart keine Variante bietet, die genau dem angegebenen Wert entspricht, dann führen Werte unter 100% zu einer schmaleren Variante, und Werte größer oder gleich 100% zu einer breiteren Variante.
 
-Die folgende Tabelle zeigt die Wirkung der Angabe verschiedener Prozentsatzwerte von `font-stretch` auf zwei verschiedene Schriftarten:
+Die folgende Tabelle zeigt die Wirkung verschiedener prozentualer Werte von `font-stretch` auf zwei verschiedene Schriftarten:
 
 ```css hidden
 @font-face {
@@ -197,8 +197,8 @@ td {
 
 {{EmbedLiveSample('Font_face_selection', "100%", "300px")}}
 
-- [Anek Malayalam](https://fonts.google.com/specimen/Anek+Malayalam) ist eine variable Google-Schrift, die Breiten von 75% bis 125% unterstützt. Werte unterhalb und oberhalb dieses Bereichs wählen die am besten passende Schrift aus.
-- [Inconsolata](https://fonts.google.com/specimen/Inconsolata) ist eine variable Schriftart, die einen kontinuierlichen Bereich von Breiten von 50% bis 200% bietet. <!-- Note, dynamically obtained woff2 from Google fonts using query: https://fonts.googleapis.com/css2?family=Inconsolata:wdth@50..200 -->
+- [Anek Malayalam](https://fonts.google.com/specimen/Anek+Malayalam) ist eine variable Google-Schriftart, die Breiten von 75% bis 125% unterstützt. Werte unterhalb und oberhalb dieses Bereichs wählen die am besten passende Schriftart aus.
+- [Inconsolata](https://fonts.google.com/specimen/Inconsolata) ist eine variable Schriftart, die einen kontinuierlichen Bereich von Breiten zwischen 50% und 200% bietet. <!-- Hinweis, dynamisch bezogenes woff2 von Google-Schriftarten durch Abfrage: https://fonts.googleapis.com/css2?family=Inconsolata:wdth@50..200 -->
 
 ## Formale Definition
 
@@ -210,7 +210,7 @@ td {
 
 ## Beispiele
 
-### Prozentsätze der Schriftstreckung festlegen
+### Einstellen von Schriftdehnungsprozentsätzen
 
 ```html
 <p class="condensed">an elephantine lizard</p>
@@ -259,5 +259,6 @@ p {
 
 - {{cssxref("font-style")}}
 - {{cssxref("font-weight")}}
-- [Lernen: Grundlegendes zu Text- und Schriftstilen](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
-- [CSS-Schriften](/de/docs/Web/CSS/CSS_fonts) Modul
+- SVG {{SVGAttr("font-stretch")}} Attribut
+- [Lernen: Fundamentales Text- und Schriftstyling](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
+- [CSS Schriftarten](/de/docs/Web/CSS/CSS_fonts) Modul
diff --git a/files/de/web/css/font-style/index.md b/files/de/web/css/font-style/index.md
index 6f917d5e4..d41159d0d 100644
--- a/files/de/web/css/font-style/index.md
+++ b/files/de/web/css/font-style/index.md
@@ -2,16 +2,16 @@
 title: font-style
 slug: Web/CSS/font-style
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`font-style`** [CSS](/de/docs/Web/CSS) Eigenschaft legt fest, ob eine Schriftart im normalen, kursiven oder schrägen Stil aus ihrer {{cssxref("font-family")}} gestaltet werden soll.
+Die **`font-style`** [CSS](/de/docs/Web/CSS) Eigenschaft legt fest, ob eine Schriftart in einer normalen, kursiven oder künstlerisch geneigten Form aus ihrer {{cssxref("font-family")}} dargestellt werden soll.
 
 {{EmbedInteractiveExample("pages/css/font-style.html")}}
 
-**Kursive** Schriftarten sind im Allgemeinen kursiv gestaltet und nutzen in der Regel weniger horizontalen Platz als ihre ungestylten Gegenstücke, während **schräge** Schriftarten meist einfach geneigte Versionen der regulären Schriftart sind. Wenn der spezifische Stil nicht verfügbar ist, werden sowohl kursive als auch schräge Schriftarten durch künstliches Neigen der Glyphen der regulären Schriftart simuliert (verwenden Sie {{cssxref("font-synthesis")}}, um dieses Verhalten zu steuern).
+**Kursive** Schriftarten sind allgemein von Natur aus kursiv und verwenden in der Regel weniger horizontalen Platz als ihre ungestylten Gegenstücke, während **künstlerisch geneigte** Schriftarten normalerweise nur geneigte Versionen der regulären Schrift sind. Wenn der angegebene Stil nicht verfügbar ist, werden sowohl kursive als auch künstlerisch geneigte Schriftarten simuliert, indem die Glyphen der regulären Schrift künstlich geneigt werden (verwenden Sie {{cssxref("font-synthesis")}}, um dieses Verhalten zu steuern).
 
 ## Syntax
 
@@ -29,29 +29,29 @@ font-style: revert-layer;
 font-style: unset;
 ```
 
-Die `font-style` Eigenschaft wird als einzelnes Schlüsselwort festgelegt, das aus der unten stehenden Werteliste ausgewählt wird und optional einen Winkel enthalten kann, wenn das Schlüsselwort `oblique` ist.
+Die `font-style` Eigenschaft wird als ein einzelnes Schlüsselwort von der unten aufgeführten Liste von Werten angegeben, die optional einen Winkel enthalten kann, wenn das Schlüsselwort `oblique` ist.
 
 ### Werte
 
 - `normal`
   - : Wählt eine Schriftart, die innerhalb einer {{Cssxref("font-family")}} als `normal` klassifiziert ist.
 - `italic`
-  - : Wählt eine Schriftart, die als `italic` klassifiziert ist. Wenn keine kursive Version der Schriftart verfügbar ist, wird stattdessen eine als `oblique` klassifizierte verwendet. Wenn keine verfügbar ist, wird der Stil künstlich simuliert.
+  - : Wählt eine Schriftart, die als `italic` klassifiziert ist. Wenn keine kursive Version der Schrift verfügbar ist, wird stattdessen eine als `oblique` klassifizierte verwendet. Wenn keine verfügbar ist, wird der Stil künstlich simuliert.
 - `oblique`
-  - : Wählt eine Schriftart, die als `oblique` klassifiziert ist. Wenn keine schräge Version der Schriftart verfügbar ist, wird stattdessen eine als `italic` klassifizierte verwendet. Wenn keine verfügbar ist, wird der Stil künstlich simuliert.
+  - : Wählt eine Schriftart, die als `oblique` klassifiziert ist. Wenn keine künstlerisch geneigte Version der Schrift verfügbar ist, wird stattdessen eine als `italic` klassifizierte verwendet. Wenn keine verfügbar ist, wird der Stil künstlich simuliert.
 - `oblique` [`<angle>`](/de/docs/Web/CSS/angle)
 
-  - : Wählt eine als `oblique` klassifizierte Schriftart aus und gibt zusätzlich einen Winkel für die Neigung des Textes an. Wenn ein oder mehrere schräge Schriftarten in der gewählten Schriftfamilie verfügbar sind, wird diejenige ausgewählt, die dem angegebenen Winkel am nächsten kommt. Wenn keine schrägen Schriftarten verfügbar sind, synthetisiert der Browser eine schräge Version der Schriftart, indem er eine normale Schriftart um den angegebenen Betrag neigt. Gültige Werte sind Gradwerte von `-90deg` bis `90deg` einschließlich. Wenn kein Winkel angegeben ist, wird ein Winkel von 14 Grad verwendet. Positive Werte sind zum Ende der Zeile geneigt, während negative Werte zum Anfang geneigt sind.
+  - : Wählt eine Schriftart, die als `oblique` klassifiziert ist, und gibt zusätzlich einen Winkel für die Neigung des Textes an. Wenn eine oder mehrere künstlerisch geneigte Schriftarten in der gewählten Schriftfamilie verfügbar sind, wird die gewählt, die dem angegebenen Winkel am nächsten kommt. Wenn keine künstlerisch geneigten Schriftarten verfügbar sind, wird der Browser eine künstlerisch geneigte Version der Schrift synthetisieren, indem ein normaler Schnitt um den angegebenen Betrag geneigt wird. Gültige Werte sind Winkelwerte von `-90deg` bis `90deg`, einschließlich. Wenn kein Winkel angegeben ist, wird ein Winkel von 14 Grad verwendet. Positive Werte sind am Ende der Zeile geneigt, während negative Werte zum Anfang hin geneigt sind.
 
-    Im Allgemeinen werden bei einer angeforderten Neigung von 14 Grad oder mehr größere Winkel bevorzugt; andernfalls werden kleinere Winkel bevorzugt (siehe den [Font Matching Abschnitt der Spezifikation](https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm) für den genauen Algorithmus).
+    Im Allgemeinen werden für einen angeforderten Winkel von 14 Grad oder mehr größere Winkel bevorzugt; andernfalls werden kleinere Winkel bevorzugt (siehe den [Abschnitt zur Schriftabstimmung](https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm) der Spezifikation für den genauen Algorithmus).
 
-### Variable Schriftarten
+### Variable Fonts
 
-Variable Schriftarten bieten eine feine Kontrolle über den Grad, in dem eine schräge Schriftart geneigt wird. Sie können dies mit dem `<angle>` Modifikator für das `oblique` Schlüsselwort auswählen.
+Variable Fonts können eine feine Kontrolle über den Grad der Neigung einer künstlerisch geneigten Schrift bieten. Sie können dies mit dem `<angle>`-Modifikator für das `oblique`-Schlüsselwort auswählen.
 
-Für TrueType- oder OpenType-Variable Fonts wird die `"slnt"` Variation verwendet, um verschiedene Neigungswinkel für oblique zu implementieren, und die `"ital"` Variation mit einem Wert von 1 wird verwendet, um Kursivwerte zu implementieren. Siehe {{cssxref("font-variation-settings")}}.
+Für TrueType oder OpenType Variable Schriften wird die `"slnt"` Variation verwendet, um unterschiedliche Neigungswinkel für oblique zu implementieren, und die `"ital"` Variation mit einem Wert von 1, um kursiv Werte zu implementieren. Siehe {{cssxref("font-variation-settings")}}.
 
-Klicken Sie auf "Play" in den Codeblöcken unten, um das Beispiel im MDN Playground zu bearbeiten. Ändern Sie den Winkelwert, um die Neigung des Textes zu sehen.
+Klicken Sie auf "Play" in den unten stehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten. Ändern Sie den Winkelwert, um die Neigung des Textes zu ändern.
 
 ```html live-sample___oblique-example
 <p class="sample">
@@ -82,8 +82,8 @@ Klicken Sie auf "Play" in den Codeblöcken unten, um das Beispiel im MDN Playgro
 
 Große Textabschnitte, die mit einem `font-style` Wert von `italic` gesetzt sind, können für Menschen mit kognitiven Beeinträchtigungen wie Dyslexie schwer zu lesen sein.
 
-- [MDN Verständnis für WCAG, Richtlinie 1.4 Erläuterungen](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [W3C Verständnis für WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)
+- [MDN Verständnis WCAG, Leitlinie 1.4 Erklärungen](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [W3C Verständnis WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)
 
 ## Formale Definition
 
@@ -131,4 +131,5 @@ Große Textabschnitte, die mit einem `font-style` Wert von `italic` gesetzt sind
 
 - {{cssxref("font-family")}}
 - {{cssxref("font-weight")}}
-- [Lernen: Grundlegende Text- und Schriftstile](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
+- SVG {{SVGAttr("font-style")}} Attribut
+- [Lernen: Grundlegendes Text- und Schriftstyling](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
diff --git a/files/de/web/css/font-variant/index.md b/files/de/web/css/font-variant/index.md
index b2a2161fc..ea2a955c7 100644
--- a/files/de/web/css/font-variant/index.md
+++ b/files/de/web/css/font-variant/index.md
@@ -2,20 +2,20 @@
 title: font-variant
 slug: Web/CSS/font-variant
 l10n:
-  sourceCommit: 9172a95797019960c7baa9e0916f4e25efcf3f27
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`font-variant`** CSS-[Kurzschreibweise](/de/docs/Web/CSS/Shorthand_properties) ermöglicht Ihnen, alle Schriftvarianten für eine Schriftart festzulegen.
+Die CSS-Eigenschaft **`font-variant`** [Shorthand-Eigenschaft](/de/docs/Web/CSS/Shorthand_properties) ermöglicht es, alle Schriftvarianten für eine Schriftart festzulegen.
 
-Sie können auch die `<font-variant-css2>` Werte von `font-variant`, die in CSS Level 2.1 definiert sind (also `normal` oder `small-caps`), mittels der [`font`](/de/docs/Web/CSS/font) Kurzschreibweise setzen.
+Sie können auch die `<font-variant-css2>` Werte von `font-variant`, die in CSS Level 2.1 definiert sind (das heißt, `normal` oder `small-caps`), mithilfe der [`font`](/de/docs/Web/CSS/font) Shorthand-Eigenschaft festlegen.
 
 {{EmbedInteractiveExample("pages/css/font-variant.html")}}
 
-## Zusammengesetzte Eigenschaften
+## Zusätzliche Eigenschaften
 
-Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
+Diese Eigenschaft ist eine Shorthand für die folgenden CSS-Eigenschaften:
 
 - [`font-variant-alternates`](/de/docs/Web/CSS/font-variant-alternates)
 - [`font-variant-caps`](/de/docs/Web/CSS/font-variant-caps)
@@ -43,38 +43,38 @@ font-variant: unset;
 
 - `normal`
 
-  - : Legt eine normale Schriftart fest. Jede Langform-Eigenschaft hat einen Initialwert von `normal`.
+  - : Gibt eine normale Schriftart an. Jede Langform-Eigenschaft hat einen Anfangswert von `normal`.
 
 - `none`
 
-  - : Setzt den Wert der [`font-variant-ligatures`](/de/docs/Web/CSS/font-variant-ligatures) als `none` und die Werte der anderen Langform-Eigenschaften als `normal`, den Initialwert.
+  - : Setzt den Wert der [`font-variant-ligatures`](/de/docs/Web/CSS/font-variant-ligatures) auf `none` und die Werte der anderen Langform-Eigenschaften auf `normal`, ihren Anfangswert.
 
 - `<common-lig-values>`, `<discretionary-lig-values>`, `<historical-lig-values>`, `<contextual-alt-values>`
 
-  - : Gibt die Schlüsselwörter an, die sich auf die Langform-Eigenschaft [`font-variant-ligatures`](/de/docs/Web/CSS/font-variant-ligatures) beziehen. Die möglichen Werte sind `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual` und `no-contextual`.
+  - : Gibt die Schlüsselwörter im Zusammenhang mit der Langform-Eigenschaft [`font-variant-ligatures`](/de/docs/Web/CSS/font-variant-ligatures) an. Die möglichen Werte sind `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual`, und `no-contextual`.
 
 - `stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()`
 
-  - : Gibt die Schlüsselwörter und Funktionen an, die sich auf die Langform-Eigenschaft [`font-variant-ligatures`](/de/docs/Web/CSS/font-variant-ligatures) beziehen.
+  - : Gibt die Schlüsselwörter und Funktionen im Zusammenhang mit der Langform-Eigenschaft [`font-variant-ligatures`](/de/docs/Web/CSS/font-variant-ligatures) an.
 
 - `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`
 
-  - : Gibt die Schlüsselwörter und Funktionen an, die sich auf die Langform-Eigenschaft [`font-variant-caps`](/de/docs/Web/CSS/font-variant-caps) beziehen. Der Wert `small-caps` ist die einzige nicht-`normal` Schriftvariante, die innerhalb der {{cssxref("font")}} Kurzschreibweise gültig ist.
+  - : Gibt die Schlüsselwörter und Funktionen im Zusammenhang mit der [`font-variant-caps`](/de/docs/Web/CSS/font-variant-caps) Langform-Eigenschaft an. Der `small-caps` Wert ist der einzige nicht-`normal` Schriftvariantenwert, der innerhalb der {{cssxref("font")}} Shorthand-Eigenschaft gültig ist.
 
 - `<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero`
 
-  - : Gibt die Schlüsselwörter an, die sich auf die Langform-Eigenschaft [`font-variant-numeric`](/de/docs/Web/CSS/font-variant-numeric) beziehen. Die möglichen Werte sind `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal` und `slashed-zero`.
+  - : Gibt die Schlüsselwörter im Zusammenhang mit der [`font-variant-numeric`](/de/docs/Web/CSS/font-variant-numeric) Langform-Eigenschaft an. Die möglichen Werte sind `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal`, und `slashed-zero`.
 
 - `<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby`
 
-  - : Gibt die Schlüsselwörter an, die sich auf die Langform-Eigenschaft [`font-variant-east-asian`](/de/docs/Web/CSS/font-variant-east-asian) beziehen. Die möglichen Werte sind `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width` und `ruby`.
+  - : Gibt die Schlüsselwörter im Zusammenhang mit der [`font-variant-east-asian`](/de/docs/Web/CSS/font-variant-east-asian) Langform-Eigenschaft an. Die möglichen Werte sind `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, und `ruby`.
 
 - `sub`, `super`
 
-  - : Gibt die Schlüsselwörter und Funktionen an, die sich auf die Langform-Eigenschaft [`font-variant-position`](/de/docs/Web/CSS/font-variant-position) beziehen.
+  - : Gibt die Schlüsselwörter und Funktionen im Zusammenhang mit der [`font-variant-position`](/de/docs/Web/CSS/font-variant-position) Langform-Eigenschaft an.
 
 - `text`, `emoji`, `unicode`
-  - : Gibt die Schlüsselwörter und Funktionen an, die sich auf die Langform-Eigenschaft [`font-variant-emoji`](/de/docs/Web/CSS/font-variant-emoji) beziehen.
+  - : Gibt die Schlüsselwörter und Funktionen im Zusammenhang mit der [`font-variant-emoji`](/de/docs/Web/CSS/font-variant-emoji) Langform-Eigenschaft an.
 
 ## Formale Definition
 
@@ -86,7 +86,7 @@ font-variant: unset;
 
 ## Beispiele
 
-### Einstellung der small-caps Schriftvariante
+### Festlegen der Schriftvariante small-caps
 
 #### HTML
 
@@ -106,7 +106,7 @@ p.small {
 }
 ```
 
-#### Ergebnis
+#### Resultat
 
 {{ EmbedLiveSample('Setting the small-caps font variant') }}
 
@@ -120,6 +120,7 @@ p.small {
 
 ## Siehe auch
 
-- [`text-transform`](/de/docs/Web/CSS/text-transform)
-- [`text-combine-upright`](/de/docs/Web/CSS/text-combine-upright)
-- [`text-orientation`](/de/docs/Web/CSS/text-orientation)
+- {{cssxref("text-transform")}}
+- {{cssxref("text-combine-upright")}}
+- {{cssxref("text-orientation")}}
+- SVG {{SVGAttr("font-variant")}} Attribut
diff --git a/files/de/web/css/font-weight/index.md b/files/de/web/css/font-weight/index.md
index 9547f4416..ef85f70aa 100644
--- a/files/de/web/css/font-weight/index.md
+++ b/files/de/web/css/font-weight/index.md
@@ -2,12 +2,12 @@
 title: font-weight
 slug: Web/CSS/font-weight
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`font-weight`** [CSS](/de/docs/Web/CSS) Eigenschaft legt die Stärke (oder Fetten) der Schriftart fest. Die verfügbaren Stärken hängen von der aktuell gesetzten {{cssxref("font-family")}} ab.
+Die **`font-weight`** [CSS](/de/docs/Web/CSS) Eigenschaft setzt das Gewicht (oder die Fettstärke) der Schriftart. Die verfügbaren Gewichte hängen von der aktuell gesetzten {{cssxref("font-family")}} ab.
 
 {{EmbedInteractiveExample("pages/css/font-weight.html")}}
 
@@ -41,56 +41,56 @@ font-weight: revert-layer;
 font-weight: unset;
 ```
 
-Die `font-weight`-Eigenschaft wird entweder mit einem `<font-weight-absolute>` Wert oder einem relativen Gewichtswert angegeben, wie unten aufgeführt.
+Die `font-weight` Eigenschaft wird entweder mit einem `<font-weight-absolute>` Wert oder einem relativen Gewichts-Wert angegeben, wie unten aufgeführt.
 
 ### Werte
 
 - `normal`
 
-  - : Normale Schriftstärke. Entspricht `400`.
+  - : Normales Schriftgewicht. Entspricht `400`.
 
 - `bold`
 
-  - : Fette Schriftstärke. Entspricht `700`.
+  - : Fettschrift-Gewicht. Entspricht `700`.
 
 - `<number>`
 
-  - : Ein {{cssxref("&lt;number&gt;")}} Wert zwischen 1 und 1000, einschließlich beider Werte. Höhere Zahlen stehen für Stärken, die kräftiger sind als (oder genauso kräftig wie) niedrigere Zahlen. Dies ermöglicht eine Feinsteuerung für [variable Schriften](#variable_schriften). Für nicht-variable Schriften wird, falls das genau angegebene Gewicht nicht verfügbar ist, ein [Ersatzgewicht](#ersatzgewichte) Algorithmus verwendet — numerische Werte, die durch 100 teilbar sind, entsprechen gebräuchlichen Gewichtsnamen, wie im Abschnitt [Allgemeine Gewichtsnamen-Zuordnung](#allgemeine_gewichtsnamen-zuordnung) unten beschrieben.
+  - : Ein {{cssxref("&lt;number&gt;")}} Wert zwischen 1 und 1000, einschließlich beider Werte. Höhere Zahlen repräsentieren schwerere Gewichte als (oder genauso schwer wie) niedrigere Zahlen. Dies ermöglicht eine feingliedrige Kontrolle für [variable Fonts](#variable_fonts). Für nicht-variable Fonts wird, wenn das exakt angegebene Gewicht nicht verfügbar ist, ein [Ersatzgewicht](#ersatzgewichte) Algorithmus verwendet — numerische Werte, die durch 100 teilbar sind, entsprechen gebräuchlichen Gewichtsnamen, wie unten in der Sektion [Übliche Gewichtsnamen-Abbildung](#übliche_gewichtsnamen-abbildung) beschrieben.
 
 - `lighter`
 
-  - : Eine relative Schriftstärke leichter als das übergeordnete Element. Beachten Sie, dass nur vier Schriftstärken für die Berechnung des relativen Gewichts berücksichtigt werden; siehe den Abschnitt [Bedeutung relativer Gewichte](#bedeutung_relativer_gewichte) unten.
+  - : Ein relatives Schriftgewicht, das leichter als das des Elternelements ist. Beachten Sie, dass für relative Gewichtbestimmung nur vier Schriftgewichte berücksichtigt werden; siehe die Sektion [Bedeutung relativer Gewichtungen](#bedeutung_relativer_gewichtungen) unten.
 
 - `bolder`
-  - : Eine relative Schriftstärke schwerer als das übergeordnete Element. Beachten Sie, dass nur vier Schriftstärken für die Berechnung des relativen Gewichts berücksichtigt werden; siehe den Abschnitt [Bedeutung relativer Gewichte](#bedeutung_relativer_gewichte) unten.
+  - : Ein relatives Schriftgewicht, das schwerer als das des Elternelements ist. Beachten Sie, dass für relative Gewichtbestimmung nur vier Schriftgewichte berücksichtigt werden; siehe die Sektion [Bedeutung relativer Gewichtungen](#bedeutung_relativer_gewichtungen) unten.
 
 ### Ersatzgewichte
 
-Wenn das angegebene Gewicht nicht verfügbar ist, wird die folgende Regel zur Bestimmung des tatsächlich angezeigten Gewichts verwendet:
+Wenn das exakte angegebene Gewicht nicht verfügbar ist, wird folgende Regel verwendet, um das tatsächlich gerenderte Gewicht zu bestimmen:
 
 - Wenn das angegebene Zielgewicht zwischen `400` und `500` einschließlich liegt:
 
-  - Suchen Sie nach verfügbaren Gewichten zwischen dem Ziel und `500` in aufsteigender Reihenfolge.
-  - Wenn kein Treffer gefunden wird, suchen Sie nach verfügbaren Gewichten unterhalb des Ziels in absteigender Reihenfolge.
-  - Wenn kein Treffer gefunden wird, suchen Sie nach verfügbaren Gewichten über `500` in aufsteigender Reihenfolge.
+  - Suche nach verfügbaren Gewichten zwischen dem Ziel und `500`, in aufsteigender Reihenfolge.
+  - Wenn keine Übereinstimmung gefunden wird, suche nach verfügbaren Gewichten kleiner als das Ziel, in absteigender Reihenfolge.
+  - Wenn keine Übereinstimmung gefunden wird, suche nach verfügbaren Gewichten größer als `500`, in aufsteigender Reihenfolge.
 
-- Wenn ein Gewicht unter `400` angegeben wird, suchen Sie nach verfügbaren Gewichten unterhalb des Ziels in absteigender Reihenfolge. Wenn kein Treffer gefunden wird, suchen Sie nach verfügbaren Gewichten über dem Ziel in aufsteigender Reihenfolge.
+- Wenn ein Gewicht kleiner als `400` angegeben ist, suche nach verfügbaren Gewichten kleiner als das Ziel, in absteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suche nach verfügbaren Gewichten größer als das Ziel, in aufsteigender Reihenfolge.
 
-- Wenn ein Gewicht über `500` angegeben wird, suchen Sie nach verfügbaren Gewichten über dem Ziel in aufsteigender Reihenfolge. Wenn kein Treffer gefunden wird, suchen Sie nach verfügbaren Gewichten unterhalb des Ziels in absteigender Reihenfolge.
+- Wenn ein Gewicht größer als `500` angegeben ist, suche nach verfügbaren Gewichten größer als das Ziel, in aufsteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suche nach verfügbaren Gewichten kleiner als das Ziel, in absteigender Reihenfolge.
 
 > [!NOTE]
-> Der Ersatzzweckalgorithmus wird nur für die Darstellung verwendet. Der berechnete Wert der Eigenschaft ist immer noch der angegebene Wert.
+> Der Ersatzgewicht-Algorithmus wird nur für das Rendering verwendet. Der berechnete Wert der Eigenschaft ist immer noch der angegebene Wert.
 
-### Bedeutung relativer Gewichte
+### Bedeutung relativer Gewichtungen
 
-Wenn `lighter` oder `bolder` angegeben ist, zeigt das folgende Diagramm, wie das absolute Schriftgewicht des Elements bestimmt wird.
+Wenn `lighter` oder `bolder` angegeben ist, zeigt die untenstehende Tabelle, wie das absolute Schriftgewicht des Elements bestimmt wird.
 
-Beachten Sie, dass bei der Verwendung relativer Gewichte nur vier Schriftstärken berücksichtigt werden — dünn (100), normal (400), fett (700) und schwer (900). Wenn eine Schriftfamilie mehr Gewichtsoptionen hat, werden diese bei der Berechnung des relativen Gewichts ignoriert.
+Beachten Sie, dass bei der Verwendung relativer Gewichte nur vier Schriftgewichte berücksichtigt werden — thin (100), normal (400), bold (700), und heavy (900). Wenn eine Schriftfamilie mehr Gewichte verfügbar hat, werden diese für die Berechnung relativer Gewichtungen ignoriert.
 
 <table class="standard-table">
   <thead>
     <tr>
-      <th>Vererbter Wert</th>
+      <th>Geerbter Wert</th>
       <th><code>bolder</code></th>
       <th><code>lighter</code></th>
     </tr>
@@ -144,30 +144,30 @@ Beachten Sie, dass bei der Verwendung relativer Gewichte nur vier Schriftstärke
   </tbody>
 </table>
 
-### Allgemeine Gewichtsnamen-Zuordnung
+### Übliche Gewichtsnamen-Abbildung
 
-Die numerischen Werte `100` bis `900` entsprechen in etwa den folgenden gebräuchlichen Gewichtsnamen (siehe die [OpenType-Spezifikation](https://learn.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass)):
+Die numerischen Werte von `100` bis `900` entsprechen ungefähr den folgenden gebräuchlichen Gewichtsnamen (siehe die [OpenType Spezifikation](https://learn.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass)):
 
-| Wert | Allgemeiner Gewichtname                                                                                                                |
+| Wert | Üblicher Gewichtname                                                                                                                   |
 | ---- | -------------------------------------------------------------------------------------------------------------------------------------- |
 | 100  | Dünn (Haarlinie)                                                                                                                       |
-| 200  | Extra Light (Ultra Light)                                                                                                              |
-| 300  | Light                                                                                                                                  |
+| 200  | Extra Leicht (Ultra Leicht)                                                                                                            |
+| 300  | Leicht                                                                                                                                 |
 | 400  | Normal (Regulär)                                                                                                                       |
-| 500  | Medium                                                                                                                                 |
-| 600  | Semi Bold (Demi Bold)                                                                                                                  |
+| 500  | Mittel                                                                                                                                 |
+| 600  | Halb Fett (Demi Fett)                                                                                                                  |
 | 700  | Fett                                                                                                                                   |
-| 800  | Extra Bold (Ultra Bold)                                                                                                                |
+| 800  | Extra Fett (Ultra Fett)                                                                                                                |
 | 900  | Schwarz (Schwer)                                                                                                                       |
 | 950  | [Extra Schwarz (Ultra Schwarz)](https://learn.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks) |
 
-### Variable Schriften
+### Variable Fonts
 
-Während viele Schriften ein bestimmtes Gewicht haben, das einer der Zahlen in [Allgemeine Gewichtsnamen-Zuordnung](#allgemeine_gewichtsnamen-zuordnung) entspricht, unterstützen die meisten variablen Schriften einen Gewichtsbereich, der eine viel feinere Granularität bietet und Designern und Entwicklern mehr Kontrolle über das gewählte Gewicht gibt.
+Während viele Schriftarten ein bestimmtes Gewicht haben, das einem der Zahlen in der [Üblichen Gewichtsnamen-Abbildung](#übliche_gewichtsnamen-abbildung) entspricht, unterstützen die meisten variablen Fonts eine Reihe von Gewichten, die eine viel feinere Granularität bieten und es Designern und Entwicklern ermöglichen, das ausgewählte Gewicht genauer zu kontrollieren.
 
-Für TrueType- oder OpenType-Variable-Schriften wird die "wght"-Variation verwendet, um unterschiedliche Gewichte zu implementieren.
+Für TrueType- oder OpenType-Variable-Schriftarten wird die "wght" Variation verwendet, um unterschiedliche Breiten zu implementieren.
 
-Dieses Demo lädt mit `font-weight: 500;` eingestellt. Ändern Sie den Wert der `font-weight`-Eigenschaft im `.sample`-Selektor, um das Gewicht des Textes zu ändern (z. B. 200, 700). Klicken Sie auf "Play" in den unten stehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten:
+Dieses Demo wird mit `font-weight: 500;` geladen. Ändern Sie den Wert der `font-weight` Eigenschaft im `.sample` Selektor, um das Gewicht des Textes zu ändern (z.B. 200, 700). Klicken Sie auf "Play" in den untenstehenden Code-Blöcken, um das Beispiel im MDN Playground zu bearbeiten:
 
 ```html live-sample___font-weight-example
 <p class="sample">
@@ -197,10 +197,10 @@ Dieses Demo lädt mit `font-weight: 500;` eingestellt. Ändern Sie den Wert der
 
 ## Barrierefreiheit
 
-Personen mit eingeschränktem Sehvermögen können Schwierigkeiten haben, Text zu lesen, der auf einen `font-weight`-Wert von `100` (Thin/Haarline) oder `200` (Extra Light) gesetzt ist, insbesondere wenn die Schriftart ein [niedriges Kontrastfarbverhältnis](/de/docs/Web/CSS/color#accessibility) hat.
+Personen mit eingeschränktem Sehvermögen können Schwierigkeiten haben, Text zu lesen, der mit einem `font-weight` Wert von `100` (Dünn/Haarlinie) oder `200` (Extra Leicht) gesetzt ist, insbesondere wenn die Schriftart ein [niedriges Kontrastverhältnis](/de/docs/Web/CSS/color#accessibility) hat.
 
-- [MDN Verständnis von WCAG, Richtlinie 1.4 Erklärungen](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [Verstehen des Erfolgskriteriums 1.4.8 | W3C Verständnis von WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+- [MDN Verständnis von WCAG, Erklärung der Richtlinie 1.4](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Verständnis des Erfolgskriteriums 1.4.8 | W3C Verständnis von WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
 
 ## Formale Definition
 
@@ -212,7 +212,7 @@ Personen mit eingeschränktem Sehvermögen können Schwierigkeiten haben, Text z
 
 ## Beispiele
 
-### Schriftstärken einstellen
+### Schriftgewichte einstellen
 
 #### HTML
 
@@ -267,5 +267,6 @@ span {
 
 - {{cssxref("font-family")}}
 - {{cssxref("font-style")}}
-- [Lernen: Grundlegende Text- und Schriftgestaltung](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
-- [CSS fonts](/de/docs/Web/CSS/CSS_fonts) Modul
+- SVG {{SVGAttr("font-weight")}} Attribut
+- [Lernen: Grundlegende Text- und Schriftstile](/de/docs/Learn_web_development/Core/Text_styling/Fundamentals)
+- [CSS Fonts](/de/docs/Web/CSS/CSS_fonts) Modul
diff --git a/files/de/web/css/height/index.md b/files/de/web/css/height/index.md
index 847962d17..da627c245 100644
--- a/files/de/web/css/height/index.md
+++ b/files/de/web/css/height/index.md
@@ -2,19 +2,19 @@
 title: height
 slug: Web/CSS/height
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`height`** [CSS](/de/docs/Web/CSS) Eigenschaft legt die Höhe eines Elements fest. Standardmäßig definiert die Eigenschaft die Höhe des [Inhaltsbereichs](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#content_area). Ist allerdings {{cssxref("box-sizing")}} auf `border-box` gesetzt, bestimmt sie stattdessen die Höhe des [Randbereichs](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#border_area).
+Die **`height`** [CSS](/de/docs/Web/CSS) Eigenschaft spezifiziert die Höhe eines Elements. Standardmäßig definiert die Eigenschaft die Höhe des [Inhaltsbereichs](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#content_area). Wenn jedoch {{cssxref("box-sizing")}} auf `border-box` gesetzt ist, bestimmt sie stattdessen die Höhe des [Randbereichs](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#border_area).
 
 {{EmbedInteractiveExample("pages/css/height.html")}}
 
 Die Eigenschaften {{cssxref("min-height")}} und {{cssxref("max-height")}} überschreiben `height`.
 
 > [!NOTE]
-> Als geometrische Eigenschaft gilt `height` auch für die {{SVGElement("svg")}}, {{SVGElement("rect")}}, {{SVGElement("image")}} und {{SVGElement("foreignObject")}} SVG-Elemente, wobei `auto` zu `0` aufgelöst wird und Prozentwerte für `<rect>` relativ zur SVG-Viewport-Höhe sind. Der CSS-`height`-Eigenschafts-Wert überschreibt jeden SVG {{SVGAttr("height")}} Attributwert, der auf dem SVG-Element gesetzt ist.
+> Als geometrische Eigenschaft gilt `height` auch für die {{SVGElement("svg")}}, {{SVGElement("rect")}}, {{SVGElement("image")}} und {{SVGElement("foreignObject")}} SVG-Elemente, wobei `auto` zu `0` aufgelöst wird und Prozentwerte relativ zur SVG-Ansichtshöhe für `<rect>` sind. Der CSS `height`-Eigenschaftswert überschreibt jeden SVG-{{SVGAttr("height")}}-Attributwert, der auf dem SVG-Element festgelegt ist.
 
 ## Syntax
 
@@ -50,9 +50,9 @@ height: unset;
 ### Werte
 
 - {{cssxref("&lt;length&gt;")}}
-  - : Definiert die Höhe als Distanzwert.
+  - : Definiert die Höhe als einen Entfernungswert.
 - {{cssxref("&lt;percentage&gt;")}}
-  - : Definiert die Höhe als Prozentsatz der Höhe des [Umgebungsblocks](/de/docs/Web/CSS/Containing_block).
+  - : Definiert die Höhe als Prozentwert der Höhe des [umgebenden Blocks](/de/docs/Web/CSS/Containing_block).
 - `auto`
   - : Der Browser berechnet und wählt eine Höhe für das angegebene Element.
 - `max-content`
@@ -60,22 +60,22 @@ height: unset;
 - `min-content`
   - : Die intrinsische Mindesthöhe.
 - `fit-content`
-  - : Nutzt den verfügbaren Platz, aber nicht mehr als [max-content](/de/docs/Web/CSS/max-content), d.h. `min(max-content, max(min-content, stretch))`.
+  - : Nutzt den verfügbaren Platz, jedoch nicht mehr als [max-content](/de/docs/Web/CSS/max-content), d.h. `min(max-content, max(min-content, stretch))`.
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
-  - : Verwendet die fit-content-Formel mit dem verfügbaren Platz, der durch das angegebene Argument ersetzt wird, d.h. `min(max-content, max(min-content, <length-percentage>))`.
+  - : Verwendet die fit-content-Formel mit dem angegebenen Argument anstelle des verfügbaren Raums, d.h. `min(max-content, max(min-content, <length-percentage>))`.
 - `stretch`
 
-  - : Setzt die Höhe der [Margin Box](/de/docs/Learn_web_development/Core/Styling_basics/Box_model#parts_of_a_box) eines Elements auf die Höhe seines [Umgebungsblocks](/de/docs/Web/CSS/Containing_block#identifying_the_containing_block). Es versucht, die Margin Box so zu erweitern, dass sie den verfügbaren Platz im Umgebungsblock ausfüllt, ähnlich wie bei `100%`, jedoch wird die resultierende Größe auf die Margin Box angewendet und nicht auf die durch [box-sizing](/de/docs/Web/CSS/box-sizing) bestimmte Box.
+  - : Setzt die Höhe des [Randbereichs](/de/docs/Learn_web_development/Core/Styling_basics/Box_model#parts_of_a_box) des Elements auf die Höhe seines [umgebenden Blocks](/de/docs/Web/CSS/Containing_block#identifying_the_containing_block). Es versucht, den Randbereich so zu gestalten, dass er den verfügbaren Raum im umgebenden Block füllt, ähnlich wie `100%`, aber die resultierende Größe auf den Randbereich anwendend, anstatt auf den durch [box-sizing](/de/docs/Web/CSS/box-sizing) bestimmten Bereich.
 
     > [!NOTE]
-    > Um die von Browsern für den `stretch`-Wert verwendeten Aliase und deren Implementierungsstatus zu überprüfen, sehen Sie sich den Abschnitt zur [Browser-Kompatibilität](#browser-kompatibilität) an.
+    > Um Aliase zu prüfen, die von Browsern für den Wert `stretch` verwendet werden, und dessen Implementierungsstatus, sehen Sie im Abschnitt [Browser-Kompatibilität](#browser-kompatibilität) nach.
 
 ## Barrierefreiheit
 
-Stellen Sie sicher, dass Elemente mit einer `height`-Einstellung nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.
+Stellen Sie sicher, dass Elemente mit einer festgelegten `height` nicht abgeschnitten werden und/oder andere Inhalte verdecken, wenn die Seite zum Vergrößern der Textgröße gezoomt wird.
 
-- [MDN Understanding WCAG, Leitfaden 1.4 Erklärungen](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+- [MDN Verständnis von WCAG, Leitfaden 1.4 Erklärungen](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Verständnis von Erfolgskriterium 1.4.4 | W3C Verständnis von WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
 
 ## Formale Definition
 
@@ -87,7 +87,7 @@ Stellen Sie sicher, dass Elemente mit einer `height`-Einstellung nicht abgeschni
 
 ## Beispiele
 
-### Festlegen der Höhe mit Pixeln und Prozentsätzen
+### Höhe mit Pixeln und Prozentsätzen festlegen
 
 #### HTML
 
@@ -147,5 +147,6 @@ div {
 - {{cssxref("anchor-size()")}}
 - {{cssxref("clamp", "clamp()")}}
 - {{cssxref("clamp", "minmax()")}}
-- [Einführung in das grundlegende CSS-Boxmodell](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
-- [CSS-Boxmodell](/de/docs/Web/CSS/CSS_box_model) Modul
+- SVG {{SVGAttr("height")}} Attribut
+- [Einführung in das CSS-Grundlegende Box-Modell](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
+- [CSS-Box-Modell](/de/docs/Web/CSS/CSS_box_model) Modul
diff --git a/files/de/web/css/letter-spacing/index.md b/files/de/web/css/letter-spacing/index.md
index 30b9bd75c..8d6771b98 100644
--- a/files/de/web/css/letter-spacing/index.md
+++ b/files/de/web/css/letter-spacing/index.md
@@ -2,12 +2,12 @@
 title: letter-spacing
 slug: Web/CSS/letter-spacing
 l10n:
-  sourceCommit: 3928d2b1004e2435e063ef4b037e06e1906d62f3
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`letter-spacing`**-Eigenschaft von [CSS](/de/docs/Web/CSS) legt das horizontale Abstandsverhalten zwischen Textzeichen fest. Dieser Wert wird dem natürlichen Abstand zwischen Zeichen beim Rendern des Texts hinzugefügt. Positive Werte von `letter-spacing` bewirken, dass Zeichen weiter auseinander liegen, während negative Werte die Zeichen näher zusammenbringen.
+Die **`letter-spacing`**-Eigenschaft [CSS](/de/docs/Web/CSS) legt das horizontale Abstandverhalten zwischen Textzeichen fest. Dieser Wert wird dem natürlichen Abstand zwischen Zeichen beim Rendern des Textes hinzugefügt. Positive Werte von `letter-spacing` bewirken, dass Zeichen weiter auseinander rücken, während negative Werte von `letter-spacing` die Zeichen näher zusammenbringen.
 
 {{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
 
@@ -33,22 +33,22 @@ letter-spacing: unset;
 ### Werte
 
 - `normal`
-  - : Der normale Buchstabenabstand für die aktuelle Schriftart. Im Gegensatz zu einem Wert von `0` ermöglicht dieses Schlüsselwort dem {{Glossary("user_agent", "User-Agent")}}, den Abstand zwischen Zeichen zu ändern, um den Text zu blocksatzgerecht zu verteilen.
+  - : Der normale Zeichenabstand für die aktuelle Schriftart. Im Gegensatz zu einem Wert von `0` erlaubt dieses Schlüsselwort dem {{Glossary("user_agent", "User Agent")}}, den Abstand zwischen Zeichen zu ändern, um den Text zu rechtfertigen.
 - {{cssxref("&lt;length&gt;")}}
-  - : Gibt zusätzlichen Zeichenabstand _zusätzlich zu_ dem Standardabstand zwischen Zeichen an. Werte können negativ sein, es kann jedoch implementierungsspezifische Begrenzungen geben. User-Agents dürfen den Zeichenzwischenraum nicht weiter vergrößern oder verkleinern, um den Text zu blocksatzgerecht zu verteilen.
+  - : Gibt zusätzlichen Zwischenzeichenabstand _zusätzlich zu_ dem Standardabstand zwischen Zeichen an. Werte können negativ sein, aber es kann implementierungsspezifische Grenzen geben. User Agents dürfen den Zwischenzeichenabstand nicht weiter erhöhen oder verringern, um den Text zu rechtfertigen.
 
 ## Barrierefreiheit
 
-Ein großer positiver oder negativer `letter-spacing`-Wert macht die Wörter, auf die die Gestaltung angewendet wird, unleserlich. Bei Text, der mit einem sehr großen positiven Wert gestaltet ist, sind die Buchstaben so weit voneinander entfernt, dass die Wörter wie eine Reihe einzelner, unverbundener Buchstaben erscheinen. Bei Text, der mit einem sehr großen negativen Wert gestaltet ist, überlappen sich die Buchstaben so stark, dass die Wörter möglicherweise nicht erkennbar sind.
+Ein großer positiver oder negativer `letter-spacing`-Wert macht das Wort oder die Worte, auf die das Styling angewendet wird, unleserlich. Für Text, der mit einem sehr großen positiven Wert gestylt ist, werden die Buchstaben so weit auseinanderliegen, dass das Wort oder die Worte wie eine Reihe individueller, nicht verbundener Buchstaben erscheinen. Bei Text, der mit einem sehr großen negativen Wert gestylt ist, überlappen sich die Buchstaben so stark, dass das Wort oder die Worte möglicherweise nicht mehr erkennbar sind.
 
-Lesbarer Buchstabenabstand muss von Fall zu Fall bestimmt werden, da verschiedene Schriftfamilien unterschiedliche Zeichenbreiten haben. Es gibt keinen Wert, der sicherstellt, dass alle Schriftfamilien ihre Lesbarkeit automatisch beibehalten.
+Lesbare Zeichenabstände müssen im Einzelfall bestimmt werden, da verschiedene Schriftarten unterschiedliche Zeichenbreiten haben. Es gibt keinen einzigen Wert, der sicherstellen kann, dass alle Schriftarten automatisch ihre Lesbarkeit behalten.
 
-- [MDN Verständnis von WCAG, Leitfaden 1.4 Erklärungen](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [Verständnis des Erfolgskriteriums 1.4.8 | W3C Verständnis von WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+- [MDN Understanding WCAG, Richtlinie 1.4 Erklärungen](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Verständnis von Erfolgskriterium 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
 
-## Internationalisierung
+## Internationalisierungsanliegen
 
-In einigen Schriftsystemen sollte kein Buchstabenabstand angewendet werden. Beispielsweise erwarten Sprachen, die die arabische Schrift verwenden, dass verbundene Buchstaben visuell verbunden bleiben, wie im folgenden Beispiel. Das Anwenden von Buchstabenabstand lässt den Text gebrochen aussehen.
+In einigen Schriftsystemen sollte kein Zeichenabstand angewendet werden. Zum Beispiel erwarten Sprachen, die das arabische Schriftsystem verwenden, dass verbundene Buchstaben visuell verbunden bleiben, wie im folgenden Beispiel. Die Anwendung von Zeichenabstand würde dazu führen, dass der Text gebrochen aussieht.
 
 > <p lang="ar" dir="rtl">شسيبتنمك</p>
 
@@ -62,7 +62,7 @@ In einigen Schriftsystemen sollte kein Buchstabenabstand angewendet werden. Beis
 
 ## Beispiele
 
-### Buchstabenabstand festlegen
+### Zeichenabstand festlegen
 
 #### HTML
 
@@ -110,3 +110,4 @@ In einigen Schriftsystemen sollte kein Buchstabenabstand angewendet werden. Beis
 
 - {{cssxref("font-kerning")}}
 - {{cssxref("word-spacing")}}
+- SVG {{SVGAttr("letter-spacing")}} Attribut
diff --git a/files/de/web/css/mask/index.md b/files/de/web/css/mask/index.md
index 4e3d460fb..39517c43a 100644
--- a/files/de/web/css/mask/index.md
+++ b/files/de/web/css/mask/index.md
@@ -2,15 +2,15 @@
 title: mask
 slug: Web/CSS/mask
 l10n:
-  sourceCommit: b2833ddfd45cae1bb5e050d24637865e9327408d
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`mask`** [CSS](/de/docs/Web/CSS) [Kurzreferenzeigenschaft](/de/docs/Web/CSS/Shorthand_properties) verbirgt ein Element (teilweise oder vollständig), indem sie das Bild an bestimmten Punkten maskiert oder zuschneidet.
+Die **`mask`** [CSS](/de/docs/Web/CSS) [Shorthand-Eigenschaft](/de/docs/Web/CSS/Shorthand_properties) verbirgt ein Element (teilweise oder vollständig), indem sie das Bild an bestimmten Stellen maskiert oder ausschneidet.
 
 > [!NOTE]
-> Zusätzlich zu den unten aufgeführten Eigenschaften setzt die `mask`-Kurzform auch {{cssxref("mask-border")}} auf ihren Anfangswert zurück. Es wird daher empfohlen, die `mask`-Kurzform anstelle anderer Kurzformen oder einzelner Eigenschaften zu verwenden, um frühere Maskeneinstellungen in der Kaskade zu überschreiben. Dadurch wird sichergestellt, dass auch `mask-border` zurückgesetzt wurde, damit die neuen Stile wirksam werden können.
+> Neben den unten aufgeführten Eigenschaften setzt das `mask` Shorthand auch {{cssxref("mask-border")}} auf seinen Initialwert zurück. Es wird daher empfohlen, das `mask` Shorthand zu verwenden, anstatt andere Shorthands oder die einzelnen Eigenschaften zu nutzen, um alle Maskeneinstellungen früher in der Kaskade zu überschreiben. Dies stellt sicher, dass `mask-border` ebenfalls zurückgesetzt wurde, um den neuen Stilen Platz zu machen.
 
 ## Bestandteileigenschaften
 
@@ -60,7 +60,7 @@ mask:
 ### Werte
 
 - `<mask-reference>`
-  - : Legt die Quelle des Maskenbildes fest. Siehe {{cssxref("mask-image")}}.
+  - : Legt die Maskenbildquelle fest. Siehe {{cssxref("mask-image")}}.
 - `<masking-mode>`
   - : Legt den Maskierungsmodus des Maskenbildes fest. Siehe {{cssxref("mask-mode")}}.
 - `<position>`
@@ -70,11 +70,11 @@ mask:
 - `<repeat-style>`
   - : Legt die Wiederholung des Maskenbildes fest. Siehe {{cssxref("mask-repeat")}}.
 - `<geometry-box>`
-  - : Wenn nur ein `<geometry-box>`-Wert angegeben ist, legt er sowohl {{cssxref("mask-origin")}} als auch {{cssxref("mask-clip")}} fest. Sind zwei `<geometry-box>`-Werte vorhanden, dann legt der erste {{cssxref("mask-origin")}} und der zweite {{cssxref("mask-clip")}} fest.
+  - : Wenn nur ein `<geometry-box>`-Wert angegeben ist, setzt er sowohl {{cssxref("mask-origin")}} als auch {{cssxref("mask-clip")}}. Wenn zwei `<geometry-box>`-Werte vorhanden sind, setzt der erste {{cssxref("mask-origin")}} und der zweite {{cssxref("mask-clip")}}.
 - `<geometry-box> | no-clip`
-  - : Legt den Bereich fest, der vom Maskenbild betroffen ist. Siehe {{cssxref("mask-clip")}}.
+  - : Legt das Gebiet fest, das von dem Maskenbild betroffen ist. Siehe {{cssxref("mask-clip")}}.
 - `<compositing-operator>`
-  - : Legt den Kompositionsoperator fest, der auf der aktuellen Maskenschicht verwendet wird. Siehe {{cssxref("mask-composite")}}.
+  - : Legt die Kompositionsoperation fest, die auf der aktuellen Maskenschicht verwendet wird. Siehe {{cssxref("mask-composite")}}.
 
 ## Formale Definition
 
@@ -86,7 +86,7 @@ mask:
 
 ## Beispiele
 
-### Bildmaskierung
+### Maskierung eines Bildes
 
 ```css
 .target {
@@ -108,7 +108,8 @@ mask:
 
 ## Siehe auch
 
-- {{Cssxref("clip-path")}}, {{Cssxref("filter")}}
-- [CSS Shapes, clipping und masking – und wie man sie verwendet](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
-- [Anwenden von SVG-Effekten auf HTML-Inhalte](/de/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
-- [SVG](/de/docs/Web/SVG)
+- {{CSSxRef("clip-path")}}
+- {{CSSxRef("filter")}}
+- SVG-Attribut {{SVGAttr("mask")}}
+- [CSS Shapes, Clipping und Masking – und wie sie zu verwenden sind](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
+- [SVG-Effekte auf HTML-Inhalt anwenden](/de/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
diff --git a/files/de/web/css/overflow/index.md b/files/de/web/css/overflow/index.md
index 0a5851670..d3aab2264 100644
--- a/files/de/web/css/overflow/index.md
+++ b/files/de/web/css/overflow/index.md
@@ -2,18 +2,18 @@
 title: overflow
 slug: Web/CSS/overflow
 l10n:
-  sourceCommit: 59a92ab5609f0a021602f11843f3b00b16e67e6d
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`overflow`** [CSS](/de/docs/Web/CSS)-[Kurzschreibweise](/de/docs/Web/CSS/Shorthand_properties) legt das gewünschte Verhalten fest, wenn Inhalte in der horizontalen und/oder vertikalen Richtung nicht in den Innenabstand eines Elements passen (überlaufen).
+Die **`overflow`** [CSS](/de/docs/Web/CSS) [Shorthand-Eigenschaft](/de/docs/Web/CSS/Shorthand_properties) legt das gewünschte Verhalten fest, wenn Inhalt nicht in den Randbereich eines Elements passt (überläuft) in horizontaler und/oder vertikaler Richtung.
 
 {{EmbedInteractiveExample("pages/css/overflow.html")}}
 
-## Bestandteil-Eigenschaften
+## Bestandteileigenschaften
 
-Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
+Diese Eigenschaft ist eine Kurzschrift für die folgenden CSS-Eigenschaften:
 
 - [`overflow-x`](/de/docs/Web/CSS/overflow-x)
 - [`overflow-y`](/de/docs/Web/CSS/overflow-y)
@@ -37,35 +37,35 @@ overflow: revert-layer;
 overflow: unset;
 ```
 
-Die `overflow`-Eigenschaft wird als ein oder zwei {{CSSXref("overflow_value", "&lt;overflow&gt;")}} Schlüsselwort-Werte angegeben. Wenn nur ein Schlüsselwort angegeben wird, werden sowohl `overflow-x` als auch `overflow-y` auf denselben Wert gesetzt. Wenn zwei Schlüsselwörter angegeben werden, gilt der erste Wert für `overflow-x` in horizontaler Richtung und der zweite für `overflow-y` in vertikaler Richtung.
+Die `overflow`-Eigenschaft wird als ein oder zwei {{CSSXref("overflow_value", "&lt;overflow&gt;")}} Schlüsselwortwerte angegeben. Wenn nur ein Schlüsselwort angegeben wird, werden sowohl `overflow-x` als auch `overflow-y` auf denselben Wert gesetzt. Wenn zwei Schlüsselwörter angegeben werden, gilt der erste Wert für `overflow-x` in der horizontalen Richtung und der zweite für `overflow-y` in der vertikalen Richtung.
 
 ### Werte
 
 - `visible`
-  - : Überlaufende Inhalte werden nicht abgeschnitten und können außerhalb des Innenabstands des Elements sichtbar sein. Der Elementkasten ist keine {{Glossary("scroll_container", "Scroll-Container")}}. Dies ist der Standardwert der `overflow`-Eigenschaft.
+  - : Überlaufender Inhalt wird nicht abgeschnitten und kann außerhalb des Randbereichs des Elements sichtbar sein. Das Element-Box ist kein {{Glossary("scroll_container", "scroll container")}}. Dies ist der Standardwert der `overflow`-Eigenschaft.
 - `hidden`
-  - : Überlaufende Inhalte werden am Innenabstand des Elements abgeschnitten. Es gibt keine Scrollleisten und die abgeschnittenen Inhalte sind nicht sichtbar (d. h. die abgeschnittenen Inhalte sind verborgen), aber die Inhalte existieren weiterhin. Benutzeragenten fügen keine Scrollleisten hinzu und erlauben Benutzern auch nicht, die Inhalte außerhalb des abgeschnittenen Bereichs durch Aktionen wie Ziehen auf einem Touchscreen oder Verwenden des Mausrads zu sehen. Die Inhalte _können_ programmgesteuert gescrollt werden (zum Beispiel durch Verlinken mit Ankertext, durch Tabben zu einem verborgenen, aber fokussierbaren Element oder durch Setzen des Wertes der [`scrollLeft`](/de/docs/Web/API/Element/scrollLeft)-Eigenschaft oder der [`scrollTo()`](/de/docs/Web/API/Element/scrollTo)-Methode), in diesem Fall ist der Elementkasten ein Scroll-Container.
+  - : Überlaufender Inhalt wird am Randbereich des Elements abgeschnitten. Es gibt keine Scrollbars, und der abgeschnittene Inhalt ist nicht sichtbar (d. h., abgeschnittener Inhalt ist versteckt), aber der Inhalt existiert weiterhin. User Agents fügen keine Scrollbars hinzu und erlauben Benutzern auch nicht, den Inhalt außerhalb des abgeschnittenen Bereichs durch Aktionen wie Ziehen auf einem Touchscreen oder Verwenden des Scrollrads auf einer Maus anzuzeigen. Der Inhalt _kann_ programmatisch gescrollt werden (zum Beispiel durch Verlinkung zu Ankertext, Tabben zu einem versteckten, aber fokussierbaren Element oder indem der Wert der [`scrollLeft`](/de/docs/Web/API/Element/scrollLeft)-Eigenschaft oder der [`scrollTo()`](/de/docs/Web/API/Element/scrollTo)-Methode gesetzt wird), in diesem Fall ist das Element-Box ein Scroll-Container.
 - `clip`
-  - : Überlaufender Inhalt wird an der _overflow clip Kante_ des Elements abgeschnitten, die mit der [`overflow-clip-margin`](/de/docs/Web/CSS/overflow-clip-margin)-Eigenschaft definiert wird. Dadurch wird der Inhalt bis zur {{cssxref("&lt;length&gt;")}}-Wert von `overflow-clip-margin` oder auf `0px`, wenn nicht gesetzt, über den Innenabstand des Elements hinaus überlaufen. Überlaufende Inhalte außerhalb des abgeschnittenen Bereichs sind nicht sichtbar, Benutzeragenten fügen keine Scrollleiste hinzu und programmgesteuertes Scrollen wird ebenfalls nicht unterstützt. Es wird kein neuer [Formatierungskontext](/de/docs/Web/CSS/CSS_display/Block_formatting_context) erstellt. Um einen Formatierungskontext zu erstellen, verwenden Sie `overflow: clip` zusammen mit {{cssxref("display", "display: flow-root", "#flow-root")}}. Der Elementkasten ist kein Scroll-Container.
+  - : Überlaufender Inhalt wird am _overflow clip edge_ des Elements abgeschnitten, das mit der [`overflow-clip-margin`](/de/docs/Web/CSS/overflow-clip-margin)-Eigenschaft definiert wird. Infolgedessen überläuft der Inhalt die Randbox des Elements um den {{cssxref("&lt;length&gt;")}}-Wert von `overflow-clip-margin` oder um `0px`, wenn er nicht gesetzt ist. Überlaufender Inhalt außerhalb des abgeschnittenen Bereichs ist nicht sichtbar, User Agents fügen keine Scrollbar hinzu und programmatisches Scrollen wird ebenfalls nicht unterstützt. Kein neuer [Formatierungskontext](/de/docs/Web/CSS/CSS_display/Block_formatting_context) wird erstellt. Um einen Formatierungskontext zu erstellen, verwenden Sie `overflow: clip` zusammen mit {{cssxref("display", "display: flow-root", "#flow-root")}}. Die Element-Box ist kein Scroll-Container.
 - `scroll`
-  - : Überlaufender Inhalt wird am Innenabstand des Elements abgeschnitten und kann in den Ansichtsbereich gescrollt werden, indem Scrollleisten verwendet werden. Benutzeragenten zeigen Scrollleisten an, unabhängig davon, ob Inhalte überlaufen, sodass in horizontaler und vertikaler Richtung, wenn der Wert auf beide Richtungen anwendbar ist. Die Verwendung dieses Schlüsselworts kann daher verhindern, dass Scrollleisten erscheinen und verschwinden, während sich der Inhalt ändert. Drucker können dennoch überlaufende Inhalte drucken. Der Elementkasten ist ein Scroll-Container.
+  - : Überlaufender Inhalt wird am Randbereich des Elements abgeschnitten und Überlaufinhalt kann mit Scrollbars in den Sichtbereich gescrollt werden. User Agents zeigen Scrollbars an, unabhängig davon, ob Inhalt überläuft, sowohl in horizontaler als auch vertikaler Richtung, wenn der Wert in beiden Richtungen angewendet wird. Die Verwendung dieses Schlüsselworts kann daher verhindern, dass Scrollbars erscheinen und verschwinden, wenn sich der Inhalt ändert. Drucker können dennoch Überflussinhalt drucken. Die Element-Box ist ein Scroll-Container.
 - `auto`
-  - : Überlaufender Inhalt wird am Innenabstand des Elements abgeschnitten und kann mit Scrollleisten in den Ansichtsbereich gescrollt werden. Anders als bei `scroll`, zeigen Benutzeragenten Scrollleisten _nur an_, wenn der Inhalt überläuft. Wenn der Inhalt in den Innenabstand des Elements passt, sieht es genauso aus wie mit `visible`, erstellt jedoch dennoch einen neuen Formatierungskontext. Der Elementkasten ist ein Scroll-Container.
+  - : Überlaufender Inhalt wird am Randbereich des Elements abgeschnitten und Überlaufinhalt kann mit Scrollbars in den Sichtbereich gescrollt werden. Im Gegensatz zu `scroll` zeigen User Agents Scrollbars _nur an_, wenn der Inhalt überläuft. Wenn der Inhalt in die Randbox des Elements passt, sieht es genauso aus wie mit `visible`, erstellt aber dennoch einen neuen Formatierungskontext. Die Element-Box ist ein Scroll-Container.
 
 > [!NOTE]
-> Der Schlüsselwort-Wert `overlay` ist ein veralteter Wertalias für `auto`. Mit `overlay` werden die Scrollleisten über den Inhalten gezeichnet, statt Platz einzunehmen.
+> Der Schlüsselwortwert `overlay` ist ein veralteter Wertalias für `auto`. Mit `overlay` werden die Scrollbars über dem Inhalt gezeichnet, anstatt Platz einzunehmen.
 
 ## Beschreibung
 
-Überlaufoptionen umfassen das Verbergen von Überlaufinhalten, das Aktivieren von Scrollleisten zum Anzeigen von Überlaufinhalten oder das Anzeigen der Inhalte, die aus einem Elementkasten in den umgebenden Bereich hinausfließen, sowie deren Kombinationen.
+Überlaufoptionen umfassen das Verbergen von Überlaufinhalt, das Aktivieren von Scrollbars, um Überlaufinhalt anzuzeigen, oder das Anzeigen des Inhalts, das aus einer Element-Box in den umgebenden Bereich fließt, und Kombinationen davon.
 
-Die folgenden Nuancen sollten bei der Verwendung der verschiedenen Schlüsselwörter für `overflow` beachtet werden:
+Die folgenden Feinheiten sollten beachtet werden, während die verschiedenen Schlüsselwörter für `overflow` verwendet werden:
 
-- Das Festlegen eines anderen Werts als `visible` (dem Standard) oder `clip` für `overflow` erstellt einen neuen [Block-Formatierungskontext](/de/docs/Web/CSS/CSS_display/Block_formatting_context). Dies ist aus technischen Gründen notwendig; wenn ein Float mit einem scrollbaren Element überlagert wird, würde er den Inhalt nach jedem Scroll-Schritt zwingend neu umbrechen, was zu einem langsamen Scroll-Erlebnis führen würde.
-- Damit eine `overflow`-Einstellung den gewünschten Effekt erzielt, muss das Block-Level-Element entweder eine festgelegte Höhe ({{cssxref("height")}} oder {{cssxref("max-height")}}) haben, wenn der Überlauf in vertikaler Richtung erfolgt, eine festgelegte Breite ({{cssxref("width")}} oder {{cssxref("max-width")}}), wenn der Überlauf in horizontaler Richtung erfolgt, eine festgelegte Blockgröße ({{cssxref("block-size")}} oder {{cssxref("max-block-size")}}), wenn der Überlauf in Blockrichtung erfolgt, oder eine festgelegte Inline-Größe ({{cssxref("inline-size")}} oder {{cssxref("max-inline-size")}}) oder {{cssxref("white-space")}} auf `nowrap` festgelegt, wenn der Überlauf in Inline-Richtung erfolgt.
-- Das Festlegen von Overflow auf `visible` in eine Richtung (d. h. `overflow-x` oder `overflow-y`), wenn es in der anderen Richtung nicht auf `visible` oder `clip` eingestellt ist, führt dazu, dass der Wert `visible` sich wie `auto` verhält.
-- Wenn Overflow in eine Richtung auf `clip` eingestellt ist und nicht als `visible` oder `clip` in der anderen Richtung, verhält sich der Wert `clip` wie `hidden`.
-- Die JavaScript-Eigenschaft [`Element.scrollTop`](/de/docs/Web/API/Element/scrollTop) kann verwendet werden, um durch Inhalte in einem Scroll-Container zu scrollen, außer wenn `overflow` auf `clip` gesetzt ist.
+- Die Angabe eines anderen Werts als `visible` (dem Standard) oder `clip` für `overflow` erstellt einen neuen [Block-Formatierungskontext](/de/docs/Web/CSS/CSS_display/Block_formatting_context). Dies ist aus technischen Gründen notwendig; wenn ein Float ein Scroll-Element schneidet, würde es den Inhalt nach jedem Scroll-Schritt neu umwickeln, was zu einem langsamen Scroll-Erlebnis führen würde.
+- Damit eine `overflow`-Einstellung die gewünschte Wirkung erzielt, muss das Block-Element entweder eine festgelegte Höhe ({{cssxref("height")}} oder {{cssxref("max-height")}}) aufweisen, wenn der Überlauf in der vertikalen Richtung erfolgt, eine festgelegte Breite ({{cssxref("width")}} oder {{cssxref("max-width")}}) bei horizontalem Überlauf, eine festgelegte Blockgröße (({{cssxref("block-size")}} oder {{cssxref("max-block-size")}}) bei Block-Richtung-Überlauf, oder eine festgelegte Inline-Größe (({{cssxref("inline-size")}} oder {{cssxref("max-inline-size")}}) oder {{cssxref("white-space")}} auf `nowrap` gesetzt bei Inline-Richtung-Überlauf.
+- Das Setzen von Overflow auf `visible` in einer Richtung (d. h. `overflow-x` oder `overflow-y`), wenn es nicht auf `visible` oder `clip` in der anderen Richtung gesetzt ist, führt dazu, dass sich der `visible`-Wert wie `auto` verhält.
+- Das Setzen von Overflow auf `clip` in einer Richtung, wenn es nicht auf `visible` oder `clip` in der anderen Richtung gesetzt ist, führt dazu, dass sich der `clip`-Wert wie `hidden` verhält.
+- Die JavaScript-Eigenschaft [`Element.scrollTop`](/de/docs/Web/API/Element/scrollTop) kann verwendet werden, um durch Inhalt in einem Scroll-Container zu scrollen, es sei denn, `overflow` ist auf `clip` gesetzt.
 
 ## Formale Definition
 
@@ -77,13 +77,13 @@ Die folgenden Nuancen sollten bei der Verwendung der verschiedenen Schlüsselwö
 
 ## Barrierefreiheit
 
-Ein scrollbarer Inhaltsbereich kann von einem nur Tastatur benutzenden Benutzer nicht gescrollt werden, mit der Ausnahme von Benutzern auf Firefox (das den Container standardmäßig mit der Tastatur fokussierbar macht).
+Ein scrollbarer Inhaltsbereich kann nicht von einem nur mit Tastatur bedienbaren Benutzer gescrollt werden, mit Ausnahme von Benutzern auf Firefox (die den Container standardmäßig tastaturfokussierbar machen).
 
-Als Entwickler werden Sie nicht-Firefox Tastatur-Nutzer, um den Container zu scrollen, ein [`tabindex`](/de/docs/Web/HTML/Global_attributes/tabindex) geben müssen, indem Sie `tabindex="0"` verwenden. Leider wird bei einem von einem Screenreader gefundenen Tab-Stopp der gesamte Inhalt des Containers ohne Kontext für den Tab-Stopp angekündigt. Das Zuweisen einer geeigneten [WAI-ARIA-Rolle](/de/docs/Web/Accessibility/ARIA/Roles) (zum Beispiel `role="region"`) und eines zugänglichen Namens (über [`aria-label`](/de/docs/Web/Accessibility/ARIA/Attributes/aria-label) oder [`aria-labelledby`](/de/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)) kann dies mildern.
+Als Entwickler, um auch nicht-Firefox-Nur-Tastatur-Benutzern das Scrollen des Containers zu ermöglichen, müssen Sie ihm einen [`tabindex`](/de/docs/Web/HTML/Global_attributes/tabindex) mit `tabindex="0"` zuweisen. Leider hat ein Screenreader, wenn er auf diesen Tab-Stopp stößt, keinen Kontext für das, was es ist, und ihr Screenreader wird wahrscheinlich den gesamten Inhalt ankündigen. Ihm eine passende [WAI-ARIA-Rolle](/de/docs/Web/Accessibility/ARIA/Roles) (`role="region"`, zum Beispiel) und einen zugänglichen Namen (über [`aria-label`](/de/docs/Web/Accessibility/ARIA/Attributes/aria-label) oder [`aria-labelledby`](/de/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)) zu geben, kann dies mildern.
 
 ## Beispiele
 
-### Ergebnisse verschiedener Overflow-Schlüsselwörter demonstrieren
+### Demonstration der Ergebnisse verschiedener Überlauf-Schlüsselwörter
 
 #### HTML
 
@@ -214,5 +214,6 @@ p.overlay {
 - {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}
 - {{Cssxref("overflow-block")}}, {{Cssxref("overflow-clip-margin")}}, {{Cssxref("overflow-inline")}}
 - {{Cssxref("clip")}}, {{Cssxref("display")}}, {{cssxref("text-overflow")}}, {{cssxref("white-space")}}
-- [CSS overflow](/de/docs/Web/CSS/CSS_overflow)
-- [Tastatur-nur Scrollbereiche](https://adrianroselli.com/2022/06/keyboard-only-scrolling-areas.html) auf adrianroselli.com (2022)
+- SVG {{SVGAttr("overflow")}} Attribut
+- [CSS overflow](/de/docs/Web/CSS/CSS_overflow) Modul
+- [Keyboard-only scrolling areas](https://adrianroselli.com/2022/06/keyboard-only-scrolling-areas.html) auf adrianroselli.com (2022)
diff --git a/files/de/web/css/pointer-events/index.md b/files/de/web/css/pointer-events/index.md
index 5355daa47..f14ffcf63 100644
--- a/files/de/web/css/pointer-events/index.md
+++ b/files/de/web/css/pointer-events/index.md
@@ -2,12 +2,12 @@
 title: pointer-events
 slug: Web/CSS/pointer-events
 l10n:
-  sourceCommit: b2833ddfd45cae1bb5e050d24637865e9327408d
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`pointer-events`** [CSS](/de/docs/Web/CSS)-Eigenschaft legt fest, unter welchen Umständen (falls überhaupt) ein bestimmtes grafisches Element das [Ziel](/de/docs/Web/API/Event/target) von Pointer-Ereignissen werden kann.
+Die **`pointer-events`**-[CSS](/de/docs/Web/CSS)-Eigenschaft legt fest, unter welchen Umständen (falls überhaupt) ein bestimmtes grafisches Element das [Ziel](/de/docs/Web/API/Event/target) von Zeigerereignissen werden kann.
 
 {{EmbedInteractiveExample("pages/css/pointer-events.html")}}
 
@@ -37,51 +37,51 @@ pointer-events: revert-layer;
 pointer-events: unset;
 ```
 
-Die `pointer-events`-Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der unten aufgeführten Liste von Werten ausgewählt wird.
+Die `pointer-events`-Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der folgenden Liste von Werten ausgewählt wird.
 
 ### Werte
 
 - `auto`
-  - : Das Element verhält sich so, als ob die `pointer-events`-Eigenschaft nicht angegeben wäre. In SVG-Inhalten haben dieser Wert und der Wert `visiblePainted` die gleiche Wirkung.
+  - : Das Element verhält sich so, wie wenn die `pointer-events`-Eigenschaft nicht angegeben wäre. In SVG-Inhalten haben dieser Wert und der Wert `visiblePainted` die gleiche Wirkung.
 - `none`
 
-  - : Das Element selbst wird niemals das [Ziel](/de/docs/Web/API/Event/target) von Pointer-Ereignissen. Sein Unterbaum könnte jedoch durch Setzen von `pointer-events` auf einen anderen Wert anvisierbar bleiben. In diesen Situationen lösen Pointer-Ereignisse Ereignislistener auf diesem Elternelement wie vorgesehen auf dem Weg zu oder von dem Nachkommen während der Ereignisfassung und der [Blasen](/de/docs/Web/API/Event/bubbles)-Phasen aus.
+  - : Das Element selbst ist niemals das [Ziel](/de/docs/Web/API/Event/target) von Zeigerereignissen. Allerdings könnte sein Unterbaum durch die Einstellung von `pointer-events` auf einen anderen Wert weiterhin anvisierbar bleiben. In diesen Fällen werden Zeigerereignisse die Ereignis-Listener auf diesem übergeordneten Element gemäß auf ihrem Weg zu oder von dem Nachkommen während der Erfassung und [Bubble](/de/docs/Web/API/Event/bubbles)-Phasen auslösen.
 
     > [!NOTE]
-    > Die `pointerenter`- und `pointerleave`-Ereignisse werden ausgelöst, wenn ein Zeigegerät in ein Element oder eines seiner Nachkommen bewegt wird. Auch wenn `pointer-events: none` auf das Elternelement gesetzt ist und nicht auf die Kinder, werden die Ereignisse auf dem Elternelement ausgelöst, nachdem der Zeiger in einen Nachkommen hineingeführt oder aus ihm hinausgeführt wurde.
+    > Die Ereignisse `pointerenter` und `pointerleave` werden ausgelöst, wenn ein Zeigegerät in ein Element oder eines seiner Nachkommen bewegt wird. Selbst wenn `pointer-events: none` auf das übergeordnete Element gesetzt ist und nicht auf die Kinder, werden die Ereignisse auf dem übergeordneten Element ausgelöst, nachdem der Zeiger in einen Nachkommen hinein- oder herausbewegt wurde.
 
 #### Nur SVG (experimentell für HTML)
 
 - `visiblePainted`
-  - : Nur SVG (experimentell für HTML). Das Element kann nur das Ziel eines Pointer-Ereignisses sein, wenn die `visibility`-Eigenschaft auf `visible` gesetzt ist und z.B. wenn ein Mauszeiger über der Innenseite (d.h. 'fill') des Elements ist und die `fill`-Eigenschaft auf einen anderen Wert als `none` gesetzt ist, oder wenn ein Mauszeiger über dem Umfang (d.h. 'stroke') des Elements ist und die `stroke`-Eigenschaft auf einen anderen Wert als `none` gesetzt ist.
+  - : Nur SVG (experimentell für HTML). Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn die `visibility`-Eigenschaft auf `visible` gesetzt ist und z.B. wenn ein Mauszeiger über dem Inneren (d.h. dem 'fill') des Elements ist und die `fill`-Eigenschaft auf einen anderen Wert als `none` gesetzt ist, oder wenn ein Mauszeiger über dem Umfang (d.h. dem 'stroke') des Elements ist und die `stroke`-Eigenschaft auf einen anderen Wert als `none` gesetzt ist.
 - `visibleFill`
-  - : Nur SVG. Das Element kann nur das Ziel eines Pointer-Ereignisses sein, wenn die `visibility`-Eigenschaft auf `visible` gesetzt ist und z.B. ein Mauszeiger über der Innenseite (d.h. 'fill') des Elements ist. Der Wert der `fill`-Eigenschaft beeinflusst die Ereignisverarbeitung nicht.
+  - : Nur SVG. Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn die `visibility`-Eigenschaft auf `visible` gesetzt ist und wenn z.B. ein Mauszeiger über dem Inneren (d.h. Fill) des Elements ist. Der Wert der `fill`-Eigenschaft beeinflusst die Ereignisverarbeitung nicht.
 - `visibleStroke`
-  - : Nur SVG. Das Element kann nur das Ziel eines Pointer-Ereignisses sein, wenn die `visibility`-Eigenschaft auf `visible` gesetzt ist und z.B. der Mauszeiger über dem Umfang (d.h. 'stroke') des Elements ist. Der Wert der `stroke`-Eigenschaft beeinflusst die Ereignisverarbeitung nicht.
+  - : Nur SVG. Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn die `visibility`-Eigenschaft auf `visible` gesetzt ist und z.B. wenn der Mauszeiger über dem Umfang (d.h. Stroke) des Elements ist. Der Wert der `stroke`-Eigenschaft beeinflusst die Ereignisverarbeitung nicht.
 - `visible`
-  - : Nur SVG (experimentell für HTML). Das Element kann das Ziel eines Pointer-Ereignisses sein, wenn die `visibility`-Eigenschaft auf `visible` gesetzt ist und z.B. der Mauszeiger über entweder der Innenseite (d.h. 'fill') oder dem Umfang (d.h. 'stroke') des Elements ist. Die Werte von `fill` und `stroke` beeinflussen die Ereignisverarbeitung nicht.
+  - : Nur SVG (experimentell für HTML). Das Element kann das Ziel eines Zeigerereignisses sein, wenn die `visibility`-Eigenschaft auf `visible` gesetzt ist und z.B. der Mauszeiger entweder über dem Inneren (d.h. Fill) oder dem Umfang (d.h. Stroke) des Elements ist. Die Werte von `fill` und `stroke` beeinflussen die Ereignisverarbeitung nicht.
 - `painted`
-  - : Nur SVG (experimentell für HTML). Das Element kann nur das Ziel eines Pointer-Ereignisses sein, wenn z.B. der Mauszeiger über der Innenseite (d.h. 'fill') des Elements ist und die `fill`-Eigenschaft auf einen anderen Wert als `none` gesetzt ist, oder wenn der Mauszeiger über dem Umfang (d.h. 'stroke') des Elements ist und die `stroke`-Eigenschaft auf einen anderen Wert als `none` gesetzt ist. Der Wert der `visibility`-Eigenschaft beeinflusst die Ereignisverarbeitung nicht.
+  - : Nur SVG (experimentell für HTML). Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn z.B. der Mauszeiger über dem Inneren (d.h. 'fill') des Elements ist und die `fill`-Eigenschaft auf einen anderen Wert als `none` gesetzt ist, oder wenn der Mauszeiger über dem Umfang (d.h. 'stroke') des Elements ist und die `stroke`-Eigenschaft auf einen anderen Wert als `none` gesetzt ist. Der Wert der `visibility`-Eigenschaft beeinflusst die Ereignisverarbeitung nicht.
 - `fill`
-  - : Nur SVG. Das Element kann nur das Ziel eines Pointer-Ereignisses sein, wenn der Zeiger über der Innenseite (d.h. 'fill') des Elements ist. Die Werte der `fill`- und `visibility`-Eigenschaften beeinflussen die Ereignisverarbeitung nicht.
+  - : Nur SVG. Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Inneren (d.h. Fill) des Elements ist. Die Werte der `fill`- und `visibility`-Eigenschaften beeinflussen die Ereignisverarbeitung nicht.
 - `stroke`
-  - : Nur SVG. Das Element kann nur das Ziel eines Pointer-Ereignisses sein, wenn der Zeiger über dem Umfang (d.h. 'stroke') des Elements ist. Die Werte der `stroke`- und `visibility`-Eigenschaften beeinflussen die Ereignisverarbeitung nicht.
+  - : Nur SVG. Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Umfang (d.h. Stroke) des Elements ist. Die Werte der `stroke`- und `visibility`-Eigenschaften beeinflussen die Ereignisverarbeitung nicht.
 - `bounding-box`
-  - : Nur SVG. Das Element kann nur das Ziel eines Pointer-Ereignisses sein, wenn der Zeiger über dem {{Glossary("Bounding_box", "Umgrenzungsrahmen")}} des Elements ist.
+  - : Nur SVG. Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn der Zeiger über der {{Glossary("Bounding_box", "Begrenzungsbox")}} des Elements ist.
 - `all`
-  - : Nur SVG (experimentell für HTML). Das Element kann nur das Ziel eines Pointer-Ereignisses sein, wenn der Zeiger über der Innenseite (d.h. 'fill') oder dem Umfang (d.h. 'stroke') des Elements ist. Die Werte der `fill`, `stroke` und `visibility`-Eigenschaften beeinflussen die Ereignisverarbeitung nicht.
+  - : Nur SVG (experimentell für HTML). Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Inneren (d.h. Fill) oder dem Umfang (d.h. Stroke) des Elements ist. Die Werte der `fill`, `stroke` und `visibility`-Eigenschaften beeinflussen die Ereignisverarbeitung nicht.
 
 ## Beschreibung
 
-Wenn diese Eigenschaft nicht angegeben ist, gelten für SVG-Inhalte dieselben Eigenschaften wie für den Wert `visiblePainted`.
+Wenn diese Eigenschaft nicht festgelegt ist, gelten für SVG-Inhalte die gleichen Eigenschaften wie beim Wert `visiblePainted`.
 
-Zusätzlich zur Angabe, dass das Element nicht das Ziel von Pointer-Ereignissen ist, weist der Wert `none` das Pointer-Ereignis an, "durch" das Element zu gehen und stattdessen auf das zu zielen, was "unter" diesem Element liegt.
+Zusätzlich zur Angabe, dass das Element nicht das Ziel von Zeigerereignissen ist, weist der Wert `none` das Zeigerereignis an, "durch" das Element zu gehen und das, was sich "darunter" befindet, stattdessen zu targetieren.
 
-Beachten Sie, dass die Verhinderung, dass ein Element das Ziel von Pointer-Ereignissen wird, durch die Verwendung von `pointer-events` _nicht_ unbedingt bedeutet, dass Listener für Pointer-Ereignisse auf diesem Element _nicht_ oder _nicht_ ausgelöst werden. Wenn eines der Kinder des Elements `pointer-events` explizit so eingestellt hat, dass es _erlaubt_, dass dieses Kind das Ziel von Pointer-Ereignissen ist, dann werden alle Ereignisse, die auf dieses Kind abzielen, durch das Elternteil gehen, während es entlang der Elternkette reist, und Listener für Ereignisse auf dem Elternteil wie vorgesehen auslösen. Natürlich wird jede Zeigeraktivität an einem Punkt auf dem Bildschirm, der vom Elternteil, aber nicht vom Kind abgedeckt ist, von weder dem Kind noch dem Elternteil erfasst (sie geht "durch" den Elternteil und zielt auf das, was darunter ist).
+Beachten Sie, dass das Verhindern, dass ein Element das Ziel von Zeigerereignissen wird, indem `pointer-events` verwendet wird, _nicht_ zwangsläufig bedeutet, dass Zeigerereignis-Listener auf diesem Element _nicht_ oder _nicht ausgelöst_ werden können. Wenn eines der Kinder des Elements `pointer-events` explizit so eingestellt hat, dass das Kind das Ziel von Zeigerereignissen sein darf, dann werden alle Ereignisse, die auf dieses Kind abzielen, das Elternteil passieren, während das Ereignis die übergeordnete Kette durchläuft, und die Ereignis-Listener auf dem Elternteil entsprechend auslösen. Natürlich wird jegliche Zeigeraktivität an einem Punkt auf dem Bildschirm, der vom Elternteil, aber nicht vom Kind überdeckt wird, weder vom Kind noch vom Elternteil abgefangen (es wird "durch" das Elternteil hindurchgehen und das darunterliegende Ziel erfassen).
 
-Elemente mit `pointer-events: none` erhalten weiterhin den Fokus durch die sequentielle Tastaturnavigation mit der <kbd>Tab</kbd>-Taste.
+Elemente mit `pointer-events: none` erhalten immer noch den Fokus durch sequentielle Tastaturnavigation mit der <kbd>Tab</kbd>-Taste.
 
-## Formaldefinition
+## Formale Definition
 
 {{cssinfo}}
 
@@ -91,9 +91,9 @@ Elemente mit `pointer-events: none` erhalten weiterhin den Fokus durch die seque
 
 ## Beispiele
 
-### Deaktivieren von Pointer-Ereignissen auf allen Bildern
+### Deaktivieren von Zeigerereignissen auf allen Bildern
 
-Dieses Beispiel deaktiviert Pointer-Ereignisse (Klicken, Ziehen, Schweben usw.) auf allen Bildern.
+Dieses Beispiel deaktiviert Zeigerereignisse (Klicken, Ziehen, Hovern usw.) auf allen Bildern.
 
 ```css
 img {
@@ -101,9 +101,9 @@ img {
 }
 ```
 
-### Deaktivieren von Pointer-Ereignissen auf einem einzelnen Link
+### Deaktivieren von Zeigerereignissen auf einem einzelnen Link
 
-Dieses Beispiel deaktiviert die Pointer-Ereignisse auf dem Link zu `http://example.com`.
+Dieses Beispiel deaktiviert Zeigerereignisse auf dem Link zu `http://example.com`.
 
 #### HTML
 
@@ -137,8 +137,7 @@ a[href="http://example.com"]
 
 ## Siehe auch
 
-- Das SVG-Attribut {{SVGAttr("pointer-events")}}
-- Das SVG-Attribut {{SVGAttr("visibility")}}
-- Die [`PointerEvent`](/de/docs/Web/API/PointerEvent)-API
-- [WebKit Specs PointerEventsProperty](https://webkit.org/specs/PointerEventsProperty.html), erweitert für die Verwendung in (X)HTML-Inhalten
-- {{cssxref("user-select")}} - steuert, ob der Benutzer Text auswählen kann
+- {{cssxref("user-select")}}
+- SVG-Attribut {{SVGAttr("pointer-events")}}
+- SVG-Attribut {{SVGAttr("visibility")}}
+- [`PointerEvent`](/de/docs/Web/API/PointerEvent)
diff --git a/files/de/web/css/rx/index.md b/files/de/web/css/rx/index.md
index ba955a1f8..7c4774b4f 100644
--- a/files/de/web/css/rx/index.md
+++ b/files/de/web/css/rx/index.md
@@ -2,15 +2,15 @@
 title: rx
 slug: Web/CSS/rx
 l10n:
-  sourceCommit: c5f403bb08c91ae77ddfe47f937438fb5e6fcae5
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`rx`** [CSS](/de/docs/Web/CSS) Eigenschaft definiert den x-Achsen- oder horizontalen Radius eines SVG-{{SVGElement("ellipse")}} und die horizontale Kurve der Ecken eines SVG-{{SVGElement("rect")}} Rechtecks. Wenn vorhanden, überschreibt sie das {{SVGAttr("rx")}} Attribut der Form.
+Die **`rx`**-Eigenschaft von [CSS](/de/docs/Web/CSS) definiert den x-Achsen- oder horizontalen Radius eines SVG-{{SVGElement("ellipse")}} und die horizontale Krümmung der Ecken eines SVG-{{SVGElement("rect")}}-Rechtecks. Wenn vorhanden, überschreibt sie das {{SVGAttr("rx")}}-Attribut der Form.
 
 > [!NOTE]
-> Die `rx` Eigenschaft gilt nur für {{SVGElement("ellipse")}} und {{SVGElement("rect")}} Elemente, die in einem {{SVGElement("svg")}} verschachtelt sind. Sie gilt nicht für andere SVG-Elemente oder HTML-Elemente oder Pseudo-Elemente.
+> Die `rx`-Eigenschaft gilt nur für {{SVGElement("ellipse")}}- und {{SVGElement("rect")}}-Elemente, die in einem {{SVGElement("svg")}} verschachtelt sind. Sie gilt nicht für andere SVG-Elemente oder HTML-Elemente oder Pseudo-Elemente.
 
 ## Syntax
 
@@ -32,19 +32,19 @@ rx: unset;
 
 ### Werte
 
-Der Wert des {{cssxref("length")}}, {{cssxref("percentage")}} oder das Schlüsselwort `auto` bezeichnet den horizontalen Radius von Ellipsen und den horizontalen Randradius von Rechtecken.
+Der {{cssxref("length")}}, {{cssxref("percentage")}} oder das `auto`-Schlüsselwort bezeichnet den horizontalen Radius von Ellipsen und den horizontalen Randradius von Rechtecken.
 
 - {{cssxref("length")}}
 
-  - : Absolute oder relative Längen können in jeder Einheit ausgedrückt werden, die vom CSS-{{cssxref("&lt;length&gt;")}} Datentyp erlaubt ist. Negative Werte sind ungültig.
+  - : Absolute oder relative Längen können in jeder Einheit ausgedrückt werden, die vom CSS-{{cssxref("&lt;length&gt;")}}-Datentyp erlaubt ist. Negative Werte sind ungültig.
 
 - {{cssxref("percentage")}}
 
-  - : Prozentsätze beziehen sich auf die Breite des aktuellen SVG-Viewports. Der verwendete Wert für ein `<rect>` ist niemals mehr als 50% der Breite des Rechtecks.
+  - : Prozentsätze beziehen sich auf die Breite des aktuellen SVG-Viewports. Der verwendete Wert für ein `<rect>` beträgt niemals mehr als 50 % der Breite des Rechtecks.
 
 - `auto`
 
-  - : Wenn auf `auto` gesetzt oder standardmäßig, entspricht der `rx`-Wert dem absoluten Längenwert, der für {{cssxref("ry")}} verwendet wird. Wenn sowohl `rx` als auch `ry` einen berechneten Wert von `auto` haben, ist der verwendete Wert `0`.
+  - : Wenn auf `auto` gesetzt oder standardmäßig `auto`, entspricht der `rx`-Wert dem absoluten Längenwert, der für {{cssxref("ry")}} verwendet wird. Wenn sowohl `rx` als auch `ry` einen berechneten Wert von `auto` haben, ist der verwendete Wert `0`.
 
 ## Formale Definition
 
@@ -56,13 +56,13 @@ Der Wert des {{cssxref("length")}}, {{cssxref("percentage")}} oder das Schlüsse
 
 ## Beispiele
 
-### Erstellen von abgerundeten Ecken
+### Abgerundete Ecken erstellen
 
-Dieses Beispiel demonstriert das Erstellen von Rechtecken mit abgerundeten Ecken durch Anwenden der `rx` Eigenschaft auf SVG-`<rect>`-Elemente.
+Dieses Beispiel zeigt, wie man Rechtecke mit abgerundeten Ecken erstellt, indem die `rx`-Eigenschaft auf SVG-`<rect>`-Elemente angewendet wird.
 
 #### HTML
 
-Wir fügen ein SVG-Bild mit vier `<rect>` Elementen ein; alle Rechtecke sind gleich, außer für ihren {{SVGAttr("x")}} Attributwert, der sie entlang der x-Achse positioniert.
+Wir fügen ein SVG-Bild mit vier `<rect>`-Elementen ein; alle Rechtecke sind gleich, abgesehen von ihrem {{SVGAttr("x")}}-Attributwert, der ihre Position entlang der x-Achse bestimmt.
 
 ```html
 <svg xmlns="http://www.w3.org/2000/svg">
@@ -76,7 +76,7 @@ Wir fügen ein SVG-Bild mit vier `<rect>` Elementen ein; alle Rechtecke sind gle
 
 #### CSS
 
-Mit CSS setzen wir einen `rx`-Wert auf vier der Rechtecke:
+Mit CSS setzen wir einen `rx`-Wert für vier der Rechtecke:
 
 ```css
 svg {
@@ -108,15 +108,15 @@ rect:nth-of-type(5) {
 
 {{EmbedLiveSample("Creating rounded corners", "300", "180")}}
 
-Das erste Rechteck hat standardmäßig `auto`; da alle `ry`-Werte in diesem Beispiel auch standardmäßig `auto` sind, ist der verwendete `rx`-Wert `0`. Die roten und blauen Rechtecke haben `10px` bzw. `2em` abgerundete Ecken. Da der SVG-Viewport standardmäßig 300px mal 150px ist, erzeugt der `5%` Wert des orangefarbenen Rechtecks einen `15px` Radius. Das grüne Rechteck hat `rx: 80%` gesetzt. Da der Wert von `rx` jedoch nie mehr als `50%` der Breite des Rechtecks beträgt, wirkt es so, als ob `rx: 50%; ry: 50%` gesetzt wäre.
+Das erste Rechteck verwendet standardmäßig `auto`; da alle `ry`-Werte in diesem Beispiel ebenfalls standardmäßig `auto` sind, ist der verwendete Wert von `rx` `0`. Die roten und blauen Rechtecke haben abgerundete Ecken mit je `10px` und `2em`. Da der SVG-Viewport standardmäßig 300px mal 150px beträgt, erzeugt der `5%`-Wert des orangefarbenen Rechtecks einen Radius von `15px`. Das grüne Rechteck hat `rx: 80%` gesetzt. Da der Wert von `rx` jedoch nie mehr als `50%` der Breite des Rechtecks beträgt, ist die Wirkung, als ob `rx: 50%; ry: 50%` gesetzt wäre.
 
-### Definition des horizontalen Radius einer Ellipse
+### Den horizontalen Radius einer Ellipse definieren
 
-Dieses einfache `<ellipse>` Beispiel demonstriert, dass die CSS `rx` Eigenschaft Vorrang vor einem SVG `rx` Attribut hat, um den horizontalen Radius der Form zu definieren.
+Dieses einfache `<ellipse>`-Beispiel zeigt, dass die CSS-`rx`-Eigenschaft Vorrang vor einem SVG-`rx`-Attribut hat, um den horizontalen Radius der Form zu definieren.
 
 #### HTML
 
-Wir fügen zwei identische `<ellipse>` Elemente in ein SVG ein; jedes mit dem `rx` Attribut auf `20` gesetzt.
+Wir fügen zwei identische `<ellipse>`-Elemente in ein SVG ein; jedes mit dem `rx`-Attribut auf `20` gesetzt.
 
 ```html
 <svg xmlns="http://www.w3.org/2000/svg">
@@ -127,7 +127,7 @@ Wir fügen zwei identische `<ellipse>` Elemente in ein SVG ein; jedes mit dem `r
 
 #### CSS
 
-Wir stylen nur die erste Ellipse, sodass ihre Zwilling mit den Standard-Stilen des User Agents verwendet wird (mit {{cssxref("fill")}} standardmäßig schwarz). Die geometrische `rx` Eigenschaft überschreibt den Wert des SVG {{SVGAttr("rx")}} Attributs. Wir setzen auch die `fill` und {{cssxref("stroke")}} Eigenschaften, um die gestylte Form von ihrem Zwilling zu unterscheiden.
+Wir stylen nur die erste Ellipse, während ihr Zwilling die Standard-Benutzeragentenstile verwendet (wobei {{cssxref("fill")}} standardmäßig schwarz ist). Die geometrische `rx`-Eigenschaft überschreibt den Wert des SVG-{{SVGAttr("rx")}}-Attributs. Wir setzen auch die `fill`- und {{cssxref("stroke")}}-Eigenschaften, um die gestylte Form von ihrem Zwilling zu unterscheiden.
 
 ```css
 svg {
@@ -145,11 +145,11 @@ ellipse:first-of-type {
 
 {{EmbedLiveSample("Defining the horizontal radius of an ellipse", "300", "180")}}
 
-Der horizontale Radius der gestylten Ellipse beträgt `80px`, wie im CSS `rx` Eigenschaftswert definiert. Der horizontale Radius der ungestylten Ellipse beträgt `20px`, der durch das `rx` Attribut definiert wurde.
+Der horizontale Radius der gestylten Ellipse beträgt `80px`, wie im CSS-`rx`-Eigenschaftswert definiert. Der horizontale Radius der ungestylten Ellipse beträgt `20px`, was durch das `rx`-Attribut definiert wurde.
 
-### Ellipsen horizontaler Radius als Prozentwerte
+### Prozentwerte des horizontalen Radius einer Ellipse
 
-Dieses Beispiel demonstriert die Verwendung von Prozentwerten für `rx`.
+Dieses Beispiel zeigt die Verwendung von Prozentwerten für `rx`.
 
 #### HTML
 
@@ -164,7 +164,7 @@ Wir verwenden dasselbe Markup wie im vorherigen Beispiel.
 
 #### CSS
 
-Das CSS ist dem vorherigen Beispiel ähnlich, mit dem einzigen Unterschied im `rx` Eigenschaftswert; in diesem Fall verwenden wir einen Prozentwert.
+Das CSS ist ähnlich wie im vorherigen Beispiel, mit dem einzigen Unterschied, dass der `rx`-Eigenschaftswert ein Prozentwert ist.
 
 ```css
 svg {
@@ -182,7 +182,7 @@ ellipse:first-of-type {
 
 {{EmbedLiveSample("Ellipse horizontal radius percentage values", "300", "180")}}
 
-Bei Verwendung von Prozentwerten für `rx` sind die Werte relativ zur Breite des SVG-Viewports. Hier beträgt die Größe des horizontalen Radius der gestylten Ellipse `30%` der Breite des aktuellen SVG-Viewports. Da die Breite standardmäßig `300px` ist, beträgt der `rx`-Wert `90px`.
+Beim Verwenden von Prozentwerten für `rx` beziehen sich die Werte auf die Breite des SVG-Viewports. Hier beträgt die Größe des horizontalen Radius der gestylten Ellipse `30%` der Breite des aktuellen SVG-Viewports. Da die Breite standardmäßig `300px` beträgt, beträgt der `rx`-Wert `90px`.
 
 ## Spezifikationen
 
@@ -194,10 +194,11 @@ Bei Verwendung von Prozentwerten für `rx` sind die Werte relativ zur Breite des
 
 ## Siehe auch
 
-- Geometrische Eigenschaften: `rx`, {{cssxref("cx")}}, {{cssxref("cy")}}, {{cssxref("r")}}, {{cssxref("ry")}}, {{cssxref("x")}}, {{cssxref("y")}}, {{cssxref("width")}}, {{cssxref("height")}}
+- Geometrieeigenschaften: `rx`, {{cssxref("cx")}}, {{cssxref("cy")}}, {{cssxref("r")}}, {{cssxref("ry")}}, {{cssxref("x")}}, {{cssxref("y")}}, {{cssxref("width")}}, {{cssxref("height")}}
 - {{cssxref("fill")}}
 - {{cssxref("stroke")}}
 - {{cssxref("paint-order")}}
-- {{cssxref("border-radius")}} Kurzschreibweise
+- {{cssxref("border-radius")}} Kurzform-Eigenschaft
 - {{cssxref("gradient/radial-gradient", "radial-gradient")}}
 - {{cssxref("basic-shape")}} Datentyp
+- SVG-{{SVGAttr("rx")}}-Attribut
diff --git a/files/de/web/css/ry/index.md b/files/de/web/css/ry/index.md
index 83a1fd7cc..1c0433aac 100644
--- a/files/de/web/css/ry/index.md
+++ b/files/de/web/css/ry/index.md
@@ -2,15 +2,15 @@
 title: ry
 slug: Web/CSS/ry
 l10n:
-  sourceCommit: c5f403bb08c91ae77ddfe47f937438fb5e6fcae5
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`ry`** [CSS](/de/docs/Web/CSS) Eigenschaft definiert den y-Achsen- oder vertikalen Radius eines SVG-{{SVGElement("ellipse")}} und die vertikale Kurve der Ecken eines SVG-{{SVGElement("rect")}}-Rechtecks. Falls vorhanden, überschreibt sie das {{SVGAttr("ry")}}-Attribut der Form.
+Die **`ry`** [CSS](/de/docs/Web/CSS) Eigenschaft definiert den y-Achsen- oder vertikalen Radius eines SVG-{{SVGElement("ellipse")}} und die vertikale Rundung der Ecken eines SVG-{{SVGElement("rect")}} Rechtecks. Wenn vorhanden, überschreibt sie das {{SVGAttr("ry")}} Attribut der Form.
 
 > [!NOTE]
-> Die `ry`-Eigenschaft gilt nur für {{SVGElement("ellipse")}} und {{SVGElement("rect")}} Elemente, die in einem {{SVGElement("svg")}} verschachtelt sind. Sie gilt nicht für andere SVG-Elemente oder HTML-Elemente oder Pseudo-Elemente.
+> Die `ry` Eigenschaft gilt nur für die {{SVGElement("ellipse")}} und {{SVGElement("rect")}} Elemente, die in einem {{SVGElement("svg")}} eingebettet sind. Sie gilt nicht für andere SVG-Elemente oder HTML-Elemente oder Pseudoelemente.
 
 ## Syntax
 
@@ -32,19 +32,19 @@ ry: unset;
 
 ### Werte
 
-Der {{cssxref("length")}}-, {{cssxref("percentage")}}- oder `auto`-Schlüsselwortwert bezeichnet den vertikalen Radius von Ellipsen und den vertikalen Randradius von Rechtecken.
+Der Wert {{cssxref("length")}}, {{cssxref("percentage")}} oder das Schlüsselwort `auto` bezeichnen den vertikalen Radius von Ellipsen und den vertikalen Rahmenradius von Rechtecken.
 
 - {{cssxref("length")}}
 
-  - : Absolute oder relative Längen können in jeder vom CSS {{cssxref("&lt;length&gt;")}}-Datentyp erlaubten Einheit ausgedrückt werden. Negative Werte sind ungültig.
+  - : Absolute oder relative Längen können in allen Einheiten dargestellt werden, die durch den CSS-Datentyp {{cssxref("&lt;length&gt;")}} erlaubt sind. Negative Werte sind ungültig.
 
 - {{cssxref("percentage")}}
 
-  - : Prozentwerte beziehen sich auf die Höhe des aktuellen SVG-Viewports. Der verwendete Wert für ein `<rect>` überschreitet niemals 50 % der Höhe des Rechtecks.
+  - : Prozentwerte beziehen sich auf die Höhe des aktuellen SVG-Viewports. Der verwendete Wert für ein `<rect>` überschreitet niemals 50% der Höhe des Rechtecks.
 
 - `auto`
 
-  - : Wenn auf `auto` gesetzt oder standardmäßig darauf zurückgegriffen wird, entspricht der `ry`-Wert dem absoluten Längenwert, der für {{cssxref("rx")}} verwendet wird. Wenn sowohl `ry` als auch `rx` den berechneten Wert `auto` haben, beträgt der verwendete Wert `0`.
+  - : Wenn `auto` gesetzt ist oder die Standardeinstellung ist, entspricht der `ry` Wert dem absoluten Längenwert, der für {{cssxref("rx")}} verwendet wird. Wenn sowohl `ry` als auch `rx` auf `auto` berechnet wurden, ist der verwendete Wert `0`.
 
 ## Formale Definition
 
@@ -56,13 +56,13 @@ Der {{cssxref("length")}}-, {{cssxref("percentage")}}- oder `auto`-Schlüsselwor
 
 ## Beispiele
 
-### Erstellen abgerundeter Ecken
+### Abgerundete Ecken erstellen
 
-Dieses Beispiel zeigt, wie man Rechtecke mit abgerundeten Ecken erstellt, indem man die `ry`-Eigenschaft auf SVG-`<rect>`-Elemente anwendet.
+Dieses Beispiel demonstriert das Erstellen von Rechtecken mit abgerundeten Ecken durch die Anwendung der `ry` Eigenschaft auf SVG `<rect>` Elemente.
 
 #### HTML
 
-Wir fügen ein SVG-Bild mit vier `<rect>`-Elementen ein; alle Rechtecke sind gleich, außer ihrem {{SVGAttr("x")}}-Attributwert, der sie entlang der x-Achse positioniert.
+Wir fügen ein SVG-Bild mit vier `<rect>` Elementen ein; alle Rechtecke sind gleich außer ihrem {{SVGAttr("x")}} Attributwert, der sie entlang der x-Achse positioniert.
 
 ```html
 <svg xmlns="http://www.w3.org/2000/svg">
@@ -76,7 +76,7 @@ Wir fügen ein SVG-Bild mit vier `<rect>`-Elementen ein; alle Rechtecke sind gle
 
 #### CSS
 
-Mit CSS setzen wir einen `ry`-Wert auf vier der Rechtecke:
+Mit CSS setzen wir einen `ry` Wert auf vier der Rechtecke:
 
 ```css
 svg {
@@ -106,17 +106,17 @@ rect:nth-of-type(5) {
 
 #### Ergebnisse
 
-{{EmbedLiveSample("Erstellen abgerundeter Ecken", "300", "180")}}
+{{EmbedLiveSample("Creating rounded corners", "300", "180")}}
 
-Das erste Rechteck verwendet standardmäßig `auto`; da alle `rx`-Werte in diesem Beispiel ebenfalls standardmäßig auf `auto` gesetzt sind, beträgt der verwendete Wert von `ry` `0`. Die roten und blauen Rechtecke haben abgerundete Ecken von `10px` bzw. `2em`. Da der SVG-Viewport standardmäßig 300px mal 150px beträgt, erzeugt der `5%`-Wert des orangefarbenen Rechtecks einen Radius von `7.5px`. Das grüne Rechteck hat `ry: 80%` gesetzt. Da der Wert von `ry` jedoch nie mehr als `50%` der Höhe des Rechtecks beträgt, ist der Effekt so, als wäre `ry: 50%; rx: 50%` gesetzt.
+Das erste Rechteck hat den Standardwert `auto`; da alle `rx` Werte in diesem Beispiel ebenfalls auf `auto` standardisieren, ist der verwendete Wert von `ry` `0`. Die roten und blauen Rechtecke haben abgerundete Ecken von `10px` bzw. `2em`. Da der SVG-Viewport standardmäßig 300px mal 150px ist, erzeugt der `5%` Wert des orangefarbenen Rechtecks einen Radius von `7.5px`. Das grüne Rechteck hat `ry: 80%` gesetzt. Da der Wert von `ry` jedoch niemals mehr als `50%` der Höhe des Rechtecks ist, wirkt es, als ob `ry: 50%; rx: 50%` gesetzt worden wäre.
 
-### Definition des vertikalen Radius einer Ellipse
+### Den vertikalen Radius einer Ellipse definieren
 
-Dieses grundlegende `<ellipse>`-Beispiel zeigt die CSS-`ry`-Eigenschaft, die gegenüber einem SVG-`ry`-Attribut Vorrang hat, um den vertikalen Radius der Form zu definieren.
+Dieses grundlegende `<ellipse>` Beispiel zeigt, wie die CSS `ry` Eigenschaft vorrangig gegenüber einem SVG `ry` Attribut verwendet wird, um den vertikalen Radius der Form zu definieren.
 
 #### HTML
 
-Wir fügen zwei identische `<ellipse>`-Elemente in ein SVG ein; jedes mit dem `ry`-Attribut auf `20` gesetzt.
+Wir fügen zwei identische `<ellipse>` Elemente in ein SVG ein; jedes hat das `ry` Attribut auf `20` gesetzt.
 
 ```html
 <svg xmlns="http://www.w3.org/2000/svg">
@@ -127,7 +127,7 @@ Wir fügen zwei identische `<ellipse>`-Elemente in ein SVG ein; jedes mit dem `r
 
 #### CSS
 
-Wir stylen nur die erste Ellipse und lassen ihren Zwilling die Standardbenutzeragentenstile verwenden (wobei {{cssxref("fill")}} standardmäßig schwarz ist). Die geometrische `ry`-Eigenschaft überschreibt den Wert des SVG-{{SVGAttr("ry")}}-Attributs. Wir setzen auch die `fill`- und {{cssxref("stroke")}}-Eigenschaften, um die gestylte Form von ihrem Zwilling zu unterscheiden.
+Wir stylen nur die erste Ellipse und lassen ihren Zwilling die Standardnutzeragentenstile verwenden (mit {{cssxref("fill")}}, die standardmäßig schwarz ist). Die geometrische `ry` Eigenschaft überschreibt den Wert des SVG {{SVGAttr("ry")}} Attributs. Wir setzen auch die `fill` und {{cssxref("stroke")}} Eigenschaften, um die gestylte Form von ihrem Zwilling zu unterscheiden.
 
 ```css
 svg {
@@ -143,13 +143,13 @@ ellipse:first-of-type {
 
 #### Ergebnisse
 
-{{EmbedLiveSample("Definition des vertikalen Radius einer Ellipse", "300", "180")}}
+{{EmbedLiveSample("Defining the vertical radius of an ellipse", "300", "180")}}
 
-Der vertikale Radius der gestylten Ellipse beträgt `80px`, wie im CSS-`ry`-Eigenschaftswert definiert. Der vertikale Radius der ungestylten Ellipse beträgt `20px`, wie durch das `ry`-Attribut definiert.
+Der vertikale Radius der gestylten Ellipse beträgt `80px`, wie im CSS `ry` Eigenschaftswert definiert. Der vertikale Radius der ungestylten Ellipse beträgt `20px`, wie durch das `ry` Attribut definiert.
 
-### Prozentwerte für den vertikalen Ellipsenradius
+### Prozentsatzwerte für den vertikalen Radius einer Ellipse
 
-Dieses Beispiel zeigt die Verwendung von Prozentwerten für `ry`.
+Dieses Beispiel zeigt die Nutzung von Prozentsatzwerten für `ry`.
 
 #### HTML
 
@@ -164,7 +164,7 @@ Wir verwenden das gleiche Markup wie im vorherigen Beispiel.
 
 #### CSS
 
-Das CSS ist dem vorherigen Beispiel ähnlich, mit dem einzigen Unterschied, dass der `ry`-Eigenschaftswert in diesem Fall ein Prozentwert ist.
+Das CSS ist ähnlich wie im vorherigen Beispiel, mit dem einzigen Unterschied, dass der `ry` Eigenschaftswert hier ein Prozentwert ist.
 
 ```css
 svg {
@@ -180,9 +180,9 @@ ellipse:first-of-type {
 
 #### Ergebnisse
 
-{{EmbedLiveSample("Prozentwerte für den vertikalen Ellipsenradius", "300", "180")}}
+{{EmbedLiveSample("Ellipse vertical radius percentage values", "300", "180")}}
 
-Bei der Verwendung von Prozentwerten für `ry` beziehen sich die Werte auf die Höhe des SVG-Viewports. Hier beträgt die Größe des vertikalen Radius der gestylten Ellipse `30%` der Höhe des aktuellen SVG-Viewports. Da die Höhe standardmäßig `150px` betrug, beträgt der `ry`-Wert `45px`, wodurch die Ellipse `90px` hoch wird.
+Wenn Prozentsatzwerte für `ry` verwendet werden, beziehen sich die Werte auf die Höhe des SVG-Viewports. Hier beträgt die Größe des vertikalen Radius der gestylten Ellipse `30%` der Höhe des aktuellen SVG-Viewports. Da die Höhe standardmäßig `150px` beträgt, ist der `ry` Wert `45px`, wodurch die Ellipse `90px` hoch wird.
 
 ## Spezifikationen
 
@@ -198,6 +198,7 @@ Bei der Verwendung von Prozentwerten für `ry` beziehen sich die Werte auf die H
 - {{cssxref("fill")}}
 - {{cssxref("stroke")}}
 - {{cssxref("paint-order")}}
-- {{cssxref("border-radius")}} Kurzschreibweise
+- Kurzschreibweise für {{cssxref("border-radius")}}
 - {{cssxref("gradient/radial-gradient", "radial-gradient")}}
 - {{cssxref("basic-shape")}} Datentyp
+- SVG {{SVGAttr("ry")}} Attribut
diff --git a/files/de/web/css/text-decoration/index.md b/files/de/web/css/text-decoration/index.md
index 69ac4373f..69056e37b 100644
--- a/files/de/web/css/text-decoration/index.md
+++ b/files/de/web/css/text-decoration/index.md
@@ -2,20 +2,20 @@
 title: text-decoration
 slug: Web/CSS/text-decoration
 l10n:
-  sourceCommit: b782b7d57e7040d5d9644a19017f4683044b5c90
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`text-decoration`** [shorthand](/de/docs/Web/CSS/Shorthand_properties)-[CSS](/de/docs/Web/CSS)-Eigenschaft legt das Erscheinungsbild dekorativer Linien auf Text fest. Sie ist eine Kurzform für {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} und die neuere {{cssxref("text-decoration-thickness")}} Eigenschaft.
+Die **`text-decoration`** [Shorthand](/de/docs/Web/CSS/Shorthand_properties) [CSS](/de/docs/Web/CSS) Eigenschaft setzt das Erscheinungsbild dekorativer Linien auf Text. Es handelt sich um eine Shorthand-Eigenschaft für {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} und die neuere {{cssxref("text-decoration-thickness")}} Eigenschaft.
 
 {{EmbedInteractiveExample("pages/css/text-decoration.html")}}
 
-Textdekorationen werden über vorgelagerte Textelemente gezeichnet. Das bedeutet, wenn ein Element eine Textdekoration angibt, kann ein Kindelement die Dekoration nicht entfernen. Zum Beispiel im Markup `<p>This text has <em>some emphasized words</em> in it.</p>` würde die Stilregel `p { text-decoration: underline; }` dazu führen, dass der gesamte Absatz unterstrichen wird. Die Stilregel `em { text-decoration: none; }` würde keine Veränderung bewirken; der gesamte Absatz wäre weiterhin unterstrichen. Die Regel `em { text-decoration: overline; }` würde jedoch eine zweite Dekoration auf "some emphasized words" erscheinen lassen.
+Textdekorationen werden über nachfolgende Textelemente hinweg gezeichnet. Das bedeutet, dass wenn ein Element eine Textdekoration spezifiziert, ein Kindelement die Dekoration nicht entfernen kann. Zum Beispiel würde im Markup `<p>This text has <em>some emphasized words</em> in it.</p>` die Stilregel `p { text-decoration: underline; }` bewirken, dass der gesamte Absatz unterstrichen wird. Die Stilregel `em { text-decoration: none; }` würde keine Änderung bewirken; der gesamte Absatz bliebe unterstrichen. Allerdings würde die Regel `em { text-decoration: overline; }` eine zweite Dekoration auf "some emphasized words" erscheinen lassen.
 
-## Bestimmende Eigenschaften
+## Zusammengesetzte Eigenschaften
 
-Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
+Diese Eigenschaft ist eine Shorthand für die folgenden CSS-Eigenschaften:
 
 - [`text-decoration-color`](/de/docs/Web/CSS/text-decoration-color)
 - [`text-decoration-line`](/de/docs/Web/CSS/text-decoration-line)
@@ -37,18 +37,18 @@ text-decoration: revert-layer;
 text-decoration: unset;
 ```
 
-Die `text-decoration`-Eigenschaft wird als ein oder mehrere durch Leerzeichen getrennte Werte angegeben, die die verschiedenen umfassenden text-decoration-Eigenschaften repräsentieren.
+Die `text-decoration` Eigenschaft wird als ein oder mehrere durch Leerzeichen getrennte Werte angegeben, die die verschiedenen Langform-Eigenschaften der Textdekoration repräsentieren.
 
 ### Werte
 
 - {{cssxref("text-decoration-line")}}
-  - : Legt die Art der Dekoration fest, wie z.B. `underline` oder `line-through`.
+  - : Setzt die Art der verwendeten Dekoration, wie `underline` oder `line-through`.
 - {{cssxref("text-decoration-color")}}
-  - : Legt die Farbe der Dekoration fest.
+  - : Setzt die Farbe der Dekoration.
 - {{cssxref("text-decoration-style")}}
-  - : Legt den Stil der Linie fest, die für die Dekoration verwendet wird, wie z.B. `solid`, `wavy` oder `dashed`.
+  - : Setzt den Stil der Linie, die für die Dekoration verwendet wird, wie `solid`, `wavy` oder `dashed`.
 - {{cssxref("text-decoration-thickness")}}
-  - : Legt die Dicke der Linie fest, die für die Dekoration verwendet wird.
+  - : Setzt die Dicke der Linie, die für die Dekoration verwendet wird.
 
 ## Formale Definition
 
@@ -60,7 +60,7 @@ Die `text-decoration`-Eigenschaft wird als ein oder mehrere durch Leerzeichen ge
 
 ## Beispiele
 
-### Demonstration von text-decoration-Werten
+### Demonstration der Werte von text-decoration
 
 ```css
 .under {
@@ -124,6 +124,7 @@ Die `text-decoration`-Eigenschaft wird als ein oder mehrere durch Leerzeichen ge
 
 ## Siehe auch
 
-- Die individuellen text-decoration-Eigenschaften sind {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}}, und {{cssxref("text-decoration-thickness")}}.
-- Die {{cssxref("text-decoration-skip-ink")}}, {{cssxref("text-underline-offset")}}, und {{cssxref("text-underline-position")}} Eigenschaften beeinflussen ebenfalls die Textdekoration, sind aber nicht in der Kurzform enthalten.
-- Das {{cssxref("list-style")}} Attribut steuert das Erscheinungsbild von Elementen in HTML-{{HTMLElement("ol")}} und {{HTMLElement("ul")}}-Listen.
+- Die individuellen Textdekorationseigenschaften sind {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} und {{cssxref("text-decoration-thickness")}}.
+- Die Eigenschaften {{cssxref("text-decoration-skip-ink")}}, {{cssxref("text-underline-offset")}} und {{cssxref("text-underline-position")}} wirken sich ebenfalls auf Textdekorationen aus, sind jedoch nicht in der Shorthand enthalten.
+- Die {{cssxref("list-style")}} Eigenschaft steuert das Erscheinungsbild von Elementen in HTML {{HTMLElement("ol")}} und {{HTMLElement("ul")}} Listen.
+- SVG {{SVGAttr("text-decoration")}} Attribut
diff --git a/files/de/web/css/text-underline-position/index.md b/files/de/web/css/text-underline-position/index.md
index 5f35d937a..d9ed6e970 100644
--- a/files/de/web/css/text-underline-position/index.md
+++ b/files/de/web/css/text-underline-position/index.md
@@ -2,12 +2,12 @@
 title: text-underline-position
 slug: Web/CSS/text-underline-position
 l10n:
-  sourceCommit: 919d97a4bda8004f63f655d3f9576c27a82c8a2a
+  sourceCommit: 0a4d5b451cc54599ed2b99cef4fdd39c3fd96a3d
 ---
 
 {{CSSRef}}
 
-Die **`text-underline-position`** [CSS](/de/docs/Web/CSS) Eigenschaft legt die Position der Unterstreichung fest, die mit dem `underline`-Wert der {{cssxref("text-decoration")}}-Eigenschaft gesetzt wird.
+Die **`text-underline-position`** [CSS](/de/docs/Web/CSS) Eigenschaft legt die Position der Unterstreichung fest, die mit dem `underline`-Wert der {{cssxref("text-decoration")}} Eigenschaft festgelegt wird.
 
 {{EmbedInteractiveExample("pages/css/text-underline-position.html")}}
 
@@ -35,15 +35,15 @@ text-underline-position: unset;
 ### Werte
 
 - `auto`
-  - : Der {{Glossary("user_agent", "User Agent")}} verwendet seinen eigenen Algorithmus, um die Linie auf oder unter der alphabetischen Grundlinie zu platzieren.
+  - : Der {{Glossary("user_agent", "User Agent")}} verwendet seinen eigenen Algorithmus, um die Linie auf oder unter der {{Glossary("/Baseline/Typography", "alphabetischen Grundlinie")}} zu platzieren.
 - `from-font`
-  - : Wenn die Schriftartdatei Informationen über eine bevorzugte Position enthält, verwenden Sie diesen Wert. Wenn die Schriftartdatei diese Informationen nicht enthält, verhalten Sie sich so, als ob `auto` gesetzt wäre, wobei der Browser eine geeignete Position wählt.
+  - : Wenn die Schriftartdatei Informationen über eine bevorzugte Position enthält, wird dieser Wert verwendet. Wenn die Schriftartdatei diese Informationen nicht enthält, verhält es sich so, als ob `auto` gesetzt wurde, wobei der Browser eine geeignete Position wählt.
 - `under`
-  - : Erzwingt, dass die Linie unterhalb der alphabetischen Grundlinie gesetzt wird, an einer Position, an der sie keine Abwärtsstriche kreuzt. Dies ist nützlich, um die Lesbarkeit mit chemischen und mathematischen Formeln zu gewährleisten, die häufig Unterschriften verwenden.
+  - : Erzwingt, dass die Linie unterhalb der alphabetischen Grundlinie gesetzt wird, an einer Stelle, an der sie keine Unterlängen kreuzt. Dies ist nützlich, um die Lesbarkeit bei chemischen und mathematischen Formeln zu gewährleisten, die häufig tiefgestellte Zeichen verwenden.
 - `left`
-  - : In vertikalen Schreibmodi erzwingt dieses Schlüsselwort, dass die Linie auf der _linken_ Seite des Textes platziert wird. In horizontalen Schreibmodi ist es ein Synonym für `auto`.
+  - : In vertikalen Schreibmodi zwingt dieses Schlüsselwort die Linie dazu, auf der _linken_ Seite des Textes platziert zu werden. In horizontalen Schreibmodi ist es ein Synonym für `auto`.
 - `right`
-  - : In vertikalen Schreibmodi erzwingt dieses Schlüsselwort, dass die Linie auf der _rechten_ Seite des Textes platziert wird. In horizontalen Schreibmodi ist es ein Synonym für `auto`.
+  - : In vertikalen Schreibmodi zwingt dieses Schlüsselwort die Linie dazu, auf der _rechten_ Seite des Textes platziert zu werden. In horizontalen Schreibmodi ist es ein Synonym für `auto`.
 
 ## Formale Definition
 
@@ -57,7 +57,7 @@ text-underline-position: unset;
 
 ### Ein einfaches Beispiel
 
-Wir erstellen zwei Beispiel-Absätze:
+Wir erstellen zwei Beispielabsätze:
 
 ```html
 <p class="horizontal">
@@ -93,17 +93,17 @@ p {
 }
 ```
 
-In diesem Beispiel setzen wir beide Absätze auf eine dicke Unterstreichung. Im horizontalen Text verwenden wir `text-underline-position: under;`, um die Unterstreichung unterhalb aller Abwärtsstriche zu platzieren.
+In diesem Beispiel setzen wir bei beiden Absätzen eine dicke Unterstreichung. Im horizontalen Text verwenden wir `text-underline-position: under;`, um die Unterstreichung unterhalb aller Unterlängen zu platzieren.
 
-Im Text mit einem vertikalen [`writing-mode`](/de/docs/Web/CSS/writing-mode) können wir dann die Werte `left` oder `right` verwenden, um die Unterstreichung je nach Bedarf links oder rechts vom Text erscheinen zu lassen.
+Bei Text mit einem vertikalen [`writing-mode`](/de/docs/Web/CSS/writing-mode) können wir dann die Werte `left` oder `right` verwenden, um die Unterstreichung links oder rechts vom Text erscheinen zu lassen, wie gewünscht.
 
 Das Live-Beispiel sieht so aus:
 
 {{EmbedLiveSample('A_basic_example', '100%', 600)}}
 
-### Setzen der text-underline-position global
+### Globale Einstellung von text-underline-position
 
-Da die Eigenschaft `text-underline-position` vererbt und nicht durch die Kurzschreibweise {{cssxref("text-decoration")}} zurückgesetzt wird, kann es geeignet sein, ihren Wert auf globaler Ebene festzulegen. Zum Beispiel kann der Wert `under` für ein Dokument geeignet sein, das viele chemische und mathematische Formeln enthält, die häufig Unterschriften verwenden.
+Da die `text-underline-position` Eigenschaft vererbt wird und nicht durch die {{cssxref("text-decoration")}} Kurzschreibweise zurückgesetzt wird, kann es sinnvoll sein, ihren Wert auf globaler Ebene festzulegen. Zum Beispiel könnte der `under` Wert für ein Dokument mit vielen chemischen und mathematischen Formeln, die häufig tiefgestellte Zeichen verwenden, passend sein.
 
 ```css
 :root {
@@ -121,4 +121,4 @@ Da die Eigenschaft `text-underline-position` vererbt und nicht durch die Kurzsch
 
 ## Siehe auch
 
-- Die Eigenschaft {{cssxref("text-decoration")}} ist eine Kurzform, um die meisten Textdekorationseigenschaften festzulegen, einschließlich {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, und {{cssxref("text-decoration-style")}}. Allerdings setzt sie nicht `text-underline-position`.
+- Die {{cssxref("text-decoration")}} Eigenschaft ist eine Kurzform zum Festlegen der meisten Textdekorationseigenschaften, einschließlich {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} und {{cssxref("text-decoration-style")}}. Sie setzt jedoch nicht `text-underline-position`.
diff --git a/files/de/web/css/transform-origin/index.md b/files/de/web/css/transform-origin/index.md
index bae6c3cd3..fab1d3bd7 100644
--- a/files/de/web/css/transform-origin/index.md
+++ b/files/de/web/css/transform-origin/index.md
@@ -2,7 +2,7 @@
 title: transform-origin
 slug: Web/CSS/transform-origin
 l10n:
-  sourceCommit: fc1cc5684c98d19816d5cc81702d70f2a0debbad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
@@ -11,25 +11,25 @@ Die **`transform-origin`** [CSS](/de/docs/Web/CSS) Eigenschaft legt den Ursprung
 
 {{EmbedInteractiveExample("pages/css/transform-origin.html")}}
 
-Der Transformationsursprung ist der Punkt, um den eine Transformation angewendet wird. Zum Beispiel ist der Transformationsursprung der Funktion [`rotate()`](/de/docs/Web/CSS/transform-function/rotate) das Rotationszentrum.
+Der Transformationsursprung ist der Punkt, um den eine Transformation angewendet wird. Zum Beispiel ist der Transformationsursprung der [`rotate()`](/de/docs/Web/CSS/transform-function/rotate) Funktion das Rotationszentrum.
 
-Diese Eigenschaft setzt effektiv ein Paar von Übersetzungen um die anderen Transformationen des Elements herum. Die erste Übersetzung verschiebt den Transformationsursprung zum tatsächlichen Ursprung bei <math><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>0</mn><mo stretchy="false">)</mo></mrow></math>. Dann werden die anderen Transformationen angewendet, und da der Transformationsursprung bei <math><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>0</mn><mo stretchy="false">)</mo></mrow></math> liegt, wirken diese Transformationen um den Transformationsursprung herum. Schließlich wird die entgegengesetzte Übersetzung angewendet, wodurch der Transformationsursprung wieder an seinen ursprünglichen Ort verschoben wird. Folglich führt diese Definition
+Effektiv umschließt diese Eigenschaft ein Paar von Übersetzungen um die anderen Transformationen des Elements. Die erste Übersetzung verschiebt den Transformationsursprung zum echten Ursprung bei <math><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>0</mn><mo stretchy="false">)</mo></mrow></math>. Dann werden die anderen Transformationen angewendet, und da der Transformationsursprung bei <math><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>0</mn><mo stretchy="false">)</mo></mrow></math> liegt, wirken diese Transformationen um den Transformationsursprung. Schließlich wird die entgegengesetzte Übersetzung angewendet, die den Transformationsursprung zu seiner ursprünglichen Position zurückbringt. Folglich ergibt diese Definition
 
 ```css
 transform-origin: -100% 50%;
 transform: rotate(45deg);
 ```
 
-zu derselben Transformation wie
+die gleiche Transformation wie
 
 ```css
 transform-origin: 0 0;
 transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
 ```
 
-Von rechts nach links gelesen ist `translate(100%, -50%)` die Übersetzung, um den Transformationsursprung zum tatsächlichen Ursprung zu bringen, `rotate(45deg)` ist die ursprüngliche Transformation, und `translate(-100%, 50%)` ist die Übersetzung, um den Transformationsursprung an seinen ursprünglichen Ort zu bringen.
+Von rechts nach links lesend, ist `translate(100%, -50%)` die Übersetzung, um den Transformationsursprung zum echten Ursprung zu bringen, `rotate(45deg)` ist die ursprüngliche Transformation, und `translate(-100%, 50%)` ist die Übersetzung, um den Transformationsursprung zu seiner ursprünglichen Position zurückzubringen.
 
-Standardmäßig ist der Transformationsursprung `center`.
+Standardmäßig ist der Ursprung einer Transformation `center`.
 
 ## Syntax
 
@@ -70,42 +70,42 @@ transform-origin: revert-layer;
 transform-origin: unset;
 ```
 
-Die `transform-origin` Eigenschaft kann mit einem, zwei oder drei Werten angegeben werden, wobei jeder Wert einen Offset darstellt. Offsets, die nicht explizit definiert sind, werden auf ihre entsprechenden [Anfangswerte](/de/docs/Web/CSS/initial_value) zurückgesetzt.
+Die Eigenschaft `transform-origin` kann mit einem, zwei oder drei Werten angegeben werden, wobei jeder Wert einen Versatz darstellt. Nicht explizit definierte Versätze werden auf ihre entsprechenden [Anfangswerte](/de/docs/Web/CSS/initial_value) zurückgesetzt.
 
-Wenn ein einzelner {{cssxref("&lt;length&gt;")}} oder {{cssxref("&lt;percentage&gt;")}} Wert definiert ist, stellt dieser den horizontalen Offset dar.
+Wenn ein einzelner {{cssxref("&lt;length&gt;")}} oder {{cssxref("&lt;percentage&gt;")}} Wert definiert ist, stellt dieser den horizontalen Versatz dar.
 
-Wenn zwei oder mehr Werte definiert sind und entweder kein Wert ein Schlüsselwort ist oder das einzige verwendete Schlüsselwort `center` ist, dann repräsentiert der erste Wert den horizontalen Offset und der zweite den vertikalen Offset.
+Wenn zwei oder mehr Werte definiert sind und entweder kein Wert ein Schlüsselwort ist oder das einzige verwendete Schlüsselwort `center` ist, dann repräsentiert der erste Wert den horizontalen Versatz und der zweite den vertikalen Versatz.
 
-- Ein-Wert-Syntax:
+- Ein-Wert Syntax:
 
-  - Der Wert muss ein {{cssxref("&lt;length&gt;")}}, ein {{cssxref("&lt;percentage&gt;")}} oder eines der Schlüsselwörter `left`, `center`, `right`, `top` und `bottom` sein.
+  - Der Wert muss ein {{cssxref("&lt;length&gt;")}}, ein {{cssxref("&lt;percentage&gt;")}}, oder eines der Schlüsselwörter `left`, `center`, `right`, `top` und `bottom` sein.
 
-- Zwei-Wert-Syntax:
+- Zwei-Wert Syntax:
 
-  - Ein Wert muss ein {{cssxref("&lt;length&gt;")}}, ein {{cssxref("&lt;percentage&gt;")}} oder eines der Schlüsselwörter `left`, `center` und `right` sein.
-  - Der andere Wert muss ein {{cssxref("&lt;length&gt;")}}, ein {{cssxref("&lt;percentage&gt;")}} oder eines der Schlüsselwörter `top`, `center` und `bottom` sein.
+  - Ein Wert muss ein {{cssxref("&lt;length&gt;")}}, ein {{cssxref("&lt;percentage&gt;")}}, oder eines der Schlüsselwörter `left`, `center` und `right` sein.
+  - Der andere Wert muss ein {{cssxref("&lt;length&gt;")}}, ein {{cssxref("&lt;percentage&gt;")}}, oder eines der Schlüsselwörter `top`, `center` und `bottom` sein.
 
-- Drei-Wert-Syntax:
+- Drei-Wert Syntax:
 
-  - Die ersten beiden Werte sind die gleichen wie bei der Zwei-Wert-Syntax.
-  - Der dritte Wert muss ein {{cssxref("&lt;length&gt;")}} sein. Es repräsentiert immer den Z-Offset.
+  - Die ersten beiden Werte sind wie bei der Zwei-Wert Syntax.
+  - Der dritte Wert muss ein {{cssxref("&lt;length&gt;")}} sein. Er repräsentiert immer den Z-Versatz.
 
 ### Werte
 
 - _x-offset_
-  - : Ist ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}}, das beschreibt, wie weit vom linken Rand der Transformationsursprung gesetzt ist.
+  - : Ist ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}} und beschreibt, wie weit vom linken Rand der Box der Ursprung der Transformation gesetzt wird.
 - _offset-keyword_
-  - : Ist eines der Schlüsselwörter `left`, `right`, `top`, `bottom` oder `center`, das den entsprechenden Offset beschreibt.
+  - : Ist eines der Schlüsselwörter `left`, `right`, `top`, `bottom`, oder `center`, das den entsprechenden Versatz beschreibt.
 - _y-offset_
-  - : Ist ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}}, das beschreibt, wie weit vom oberen Rand der Transformationsursprung gesetzt ist.
+  - : Ist ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}} und beschreibt, wie weit vom oberen Rand der Box der Ursprung der Transformation gesetzt wird.
 - _x-offset-keyword_
-  - : Ist eines der Schlüsselwörter `left`, `right` oder `center`, das beschreibt, wie weit vom linken Rand der Transformationsursprung gesetzt ist.
+  - : Ist eines der Schlüsselwörter `left`, `right`, oder `center`, das beschreibt, wie weit vom linken Rand der Box der Ursprung der Transformation gesetzt wird.
 - _y-offset-keyword_
-  - : Ist eines der Schlüsselwörter `top`, `bottom` oder `center`, das beschreibt, wie weit vom oberen Rand der Transformationsursprung gesetzt ist.
+  - : Ist eines der Schlüsselwörter `top`, `bottom`, oder `center`, das beschreibt, wie weit vom oberen Rand der Box der Ursprung der Transformation gesetzt wird.
 - _z-offset_
-  - : Ist ein {{cssxref("&lt;length&gt;")}} (und niemals ein {{cssxref("&lt;percentage&gt;")}}, das die Anweisung ungültig machen würde), das beschreibt, wie weit von der Benutzeransicht der z=0 Ursprungs gesetzt ist.
+  - : Ist ein {{cssxref("&lt;length&gt;")}} (und niemals ein {{cssxref("&lt;percentage&gt;")}}, was die Anweisung ungültig machen würde) und beschreibt, wie weit vom Betrachterauge der z=0 Ursprung gesetzt wird.
 
-Die Schlüsselwörter sind bequeme Abkürzungen und entsprechen den folgenden {{cssxref("&lt;percentage&gt;")}}-Werten:
+Die Schlüsselwörter sind bequeme Kurzformen und entsprechen den folgenden {{cssxref("&lt;percentage&gt;")}} Werten:
 
 | Schlüsselwort | Wert   |
 | ------------- | ------ |
@@ -115,14 +115,14 @@ Die Schlüsselwörter sind bequeme Abkürzungen und entsprechen den folgenden {{
 | `top`         | `0%`   |
 | `bottom`      | `100%` |
 
-## Formelle Definition
+## Formale Definition
 
 {{CSSInfo}}
 
 > [!NOTE]
-> Der Anfangswert von `transform-origin` ist `0 0` für alle SVG-Elemente außer für Wurzel-`<svg>`-Elemente und `<svg>`-Elemente, die ein direktes Kind von einem [foreignObject](/de/docs/Web/SVG/Element/foreignObject) sind und deren `transform-origin` `50% 50%` ist, wie bei anderen CSS-Elementen. Siehe das [SVG transform-origin](/de/docs/Web/SVG/Attribute/transform-origin)-Attribut für weitere Informationen.
+> Der Anfangswert von `transform-origin` ist `0 0` für alle SVG-Elemente außer für root `<svg>` Elemente und `<svg>` Elemente, die ein direktes Kind eines [foreignObject](/de/docs/Web/SVG/Element/foreignObject) sind und deren `transform-origin` `50% 50%` ist, wie andere CSS-Elemente. Siehe das [SVG transform-origin](/de/docs/Web/SVG/Attribute/transform-origin) Attribut für weitere Informationen.
 
-## Formelle Syntax
+## Formale Syntax
 
 {{csssyntax}}
 
@@ -130,7 +130,7 @@ Die Schlüsselwörter sind bequeme Abkürzungen und entsprechen den folgenden {{
 
 ### Eine Demonstration verschiedener Transformationswerte
 
-Dieses Beispiel zeigt die Wirkung von unterschiedlichen `transform-origin` Werten für eine Vielzahl von Transformationsfunktionen.
+Dieses Beispiel zeigt die Wirkung der Wahl verschiedener `transform-origin` Werte für verschiedene Transformationsfunktionen.
 
 ```html hidden
 <div class="container">
@@ -320,4 +320,5 @@ transform-origin: 100% -30%;
 ## Siehe auch
 
 - [Using CSS transforms](/de/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)
+- SVG {{SVGAttr("transform-origin")}} Attribut
 - <https://css-tricks.com/almanac/properties/t/transform-origin/>
diff --git a/files/de/web/css/transform/index.md b/files/de/web/css/transform/index.md
index 213d7ea04..a06aa0777 100644
--- a/files/de/web/css/transform/index.md
+++ b/files/de/web/css/transform/index.md
@@ -2,20 +2,22 @@
 title: transform
 slug: Web/CSS/transform
 l10n:
-  sourceCommit: 8dd227b90abeed60434970aff3da9776d1f24d67
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`transform`**-Eigenschaft [CSS](/de/docs/Web/CSS) ermöglicht es Ihnen, ein Element zu drehen, zu skalieren, zu schrägstellen oder zu verschieben.
-Sie modifiziert den Koordinatenraum des CSS-[visuellen Formatierungsmodells](/de/docs/Web/CSS/Visual_formatting_model).
+Die **`transform`**-Eigenschaft von [CSS](/de/docs/Web/CSS) erlaubt es Ihnen, ein Element zu rotieren, skalieren, scheren oder zu verschieben.
+Sie verändert den Koordinatenraum des CSS-[visuellen Formatierungsmodells](/de/docs/Web/CSS/Visual_formatting_model).
 
 {{EmbedInteractiveExample("pages/css/transform.html")}}
 
-Wenn die Eigenschaft einen anderen Wert als `none` hat, wird ein [Stacking Context](/de/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) erstellt. In diesem Fall wird das Element als [Containting Block](/de/docs/Web/CSS/Containing_block) für alle darin enthaltenen `position: fixed;` oder `position: absolute;`-Elemente fungieren.
+Wenn die Eigenschaft einen anderen Wert als `none` hat, wird ein [Stacking-Kontext](/de/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) erstellt.
+In diesem Fall fungiert das Element als [enthältender Block](/de/docs/Web/CSS/Containing_block) für alle Elemente mit `position: fixed;` oder `position: absolute;`, die es enthält.
 
 > [!WARNING]
-> Nur transformierbare Elemente können `transform`iert werden. Das heißt, alle Elemente, deren Layout durch das CSS-Box-Modell bestimmt wird, mit Ausnahme von: {{Glossary("Inline-level_content", "nicht-ersetzten Inline-Boxen")}}, [Tabellenspalten-Boxen](/de/docs/Web/HTML/Element/col) und [Tabellenspalten-Gruppen-Boxen](/de/docs/Web/HTML/Element/colgroup).
+> Nur transformierbare Elemente können `transform`iert werden.
+> Das heißt, alle Elemente, deren Layout durch das CSS-Boxmodell geregelt wird, mit Ausnahme von: {{Glossary("Inline-level_content", "nicht ersetzten Inline-Boxen")}}, [Tabellenspalten-Boxen](/de/docs/Web/HTML/Element/col) und [Tabellenspalten-Gruppen-Boxen](/de/docs/Web/HTML/Element/colgroup).
 
 ## Syntax
 
@@ -58,26 +60,27 @@ transform: revert-layer;
 transform: unset;
 ```
 
-Die `transform`-Eigenschaft kann entweder als das Schlüsselwort `none` oder als ein oder mehrere `<transform-function>`-Werte angegeben werden.
+Die `transform`-Eigenschaft kann entweder als Schlüsselwortwert `none` oder als ein oder mehrere `<transform-function>`-Werte angegeben werden.
 
 ### Werte
 
 - {{cssxref("&lt;transform-function&gt;")}}
-  - : Eine oder mehrere der [CSS-Transform-Funktionen](/de/docs/Web/CSS/transform-function), die angewendet werden sollen.
-    Die Transformationsfunktionen werden in der Reihenfolge von links nach rechts multipliziert, das heißt, zusammengesetzte Transformationen werden effektiv [in der Reihenfolge von rechts nach links angewendet](#transformationsreihenfolge).
+  - : Eine oder mehrere der [CSS-Transformationsfunktionen](/de/docs/Web/CSS/transform-function), die angewendet werden sollen.
+    Die Transformationsfunktionen werden von links nach rechts multipliziert, was bedeutet, dass zusammengesetzte Transformationen effektiv [in umgekehrter Reihenfolge von rechts nach links angewendet werden](#transformationsreihenfolge).
 - `none`
   - : Gibt an, dass keine Transformation angewendet werden soll.
 
 ## Barrierefreiheit
 
-Skalierungs-/Zoom-Animationen sind problematisch für die Barrierefreiheit, da sie eine häufige Ursache für bestimmte Arten von Migräne sind. Wenn Sie solche Animationen auf Ihrer Webseite einfügen müssen, sollten Sie eine Kontrolle bereitstellen, mit der Nutzer Animationen ausschalten können, vorzugsweise für die gesamte Seite.
+Skalierungs-/Zoom-Animationen sind problematisch für die Barrierefreiheit, da sie häufig ein Auslöser für bestimmte Arten von Migräne sind.
+Wenn Sie solche Animationen auf Ihrer Website einfügen müssen, sollten Sie eine Steuerung bereitstellen, die es Benutzern ermöglicht, Animationen auszuschalten, vorzugsweise auf der gesamten Seite.
 
-Berücksichtigen Sie auch die Nutzung der {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} Medienfunktion — nutzen Sie sie, um eine [Media Query](/de/docs/Web/CSS/CSS_media_queries) zu schreiben, die Animationen deaktiviert, wenn der Nutzer in seinen Systemeinstellungen eine reduzierte Animation angegeben hat.
+Berücksichtigen Sie auch die Verwendung des {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}-Medienmerkmals — verwenden Sie es, um eine [Media-Query](/de/docs/Web/CSS/CSS_media_queries) zu schreiben, die Animationen ausschaltet, wenn der Benutzer reduzierte Animation in seinen Systemeinstellungen angegeben hat.
 
 Erfahren Sie mehr:
 
-- [MDN Erklärung zu WCAG, Richtlinie 2.3](/de/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_—_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions)
-- [Erklärung zum Erfolgs-Kriterium 2.3.3 | W3C Erklärung zu WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)
+- [MDN Understanding WCAG, Guideline 2.3 Erklärungen](/de/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_—_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions)
+- [Verständnis des Erfolgskriteriums 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)
 
 ## Formale Definition
 
@@ -89,7 +92,7 @@ Erfahren Sie mehr:
 
 ## Beispiele
 
-### Übersetzen und Drehen eines Elements
+### Übersetzen und Rotieren eines Elements
 
 #### HTML
 
@@ -114,7 +117,7 @@ div {
 
 ### Transformationsreihenfolge
 
-Die Reihenfolge der Transformationsfunktionen ist wichtig. In diesem Beispiel werden zwei Boxen um die gleichen Werte gedreht und verschoben; nur die Reihenfolge der Transformationsfunktionen unterscheidet sich.
+Die Reihenfolge der Transformationsfunktionen ist wichtig. In diesem Beispiel werden zwei Kästchen um die gleichen Werte rotiert und verschoben; nur die Reihenfolge der Transformationsfunktionen ist unterschiedlich.
 
 #### HTML
 
@@ -174,11 +177,11 @@ div {
 
 {{EmbedLiveSample("Transform_order", "400", "460")}}
 
-Wenn ein Element vor dem Verschieben gedreht wird, befindet sich die Verschieberichtung auf der gedrehten Achse. Die Achse ist durch die gestrichelten Linien angezeigt.
+Wenn ein Element vor dem Verschieben rotiert wird, befindet sich die Übersetzungsrichtung auf der gedrehten Achse. Die Achse wird durch die gepunkteten Linien angezeigt.
 
 ### Weitere Beispiele
 
-Bitte sehen Sie [Using CSS transforms](/de/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) und {{cssxref("&lt;transform-function&gt;")}} für weitere Beispiele.
+Bitte sehen Sie sich [Verwendung von CSS-Transformationen](/de/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) und {{cssxref("&lt;transform-function&gt;")}} für weitere Beispiele an.
 
 ## Spezifikationen
 
@@ -190,7 +193,8 @@ Bitte sehen Sie [Using CSS transforms](/de/docs/Web/CSS/CSS_transforms/Using_CSS
 
 ## Siehe auch
 
-- [Using CSS transforms](/de/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)
-- {{cssxref("&lt;transform-function&gt;")}} Datentyp mit allen erklärten Transformationsfunktionen.
-- Einzelne CSS-Eigenschaften: {{cssxref('translate')}}, {{cssxref('rotate')}}, und {{cssxref('scale')}} (es gibt keine `skew`-Eigenschaft).
+- [Verwendung von CSS-Transformationen](/de/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)
+- {{cssxref("&lt;transform-function&gt;")}} Datentyp mit allen erläuterten Transformationsfunktionen.
+- Einzelne CSS-Eigenschaften: {{cssxref('translate')}}, {{cssxref('rotate')}} und {{cssxref('scale')}} (es gibt keine `skew`-Eigenschaft).
+- SVG {{SVGAttr("transform")}}-Attribut
 - Online-Tool zur Visualisierung von CSS-Transformationsfunktionen: [CSS Transform Playground](https://css-transform.moro.es/)
diff --git a/files/de/web/css/unicode-bidi/index.md b/files/de/web/css/unicode-bidi/index.md
index ce3520794..790a6d384 100644
--- a/files/de/web/css/unicode-bidi/index.md
+++ b/files/de/web/css/unicode-bidi/index.md
@@ -2,19 +2,19 @@
 title: unicode-bidi
 slug: Web/CSS/unicode-bidi
 l10n:
-  sourceCommit: fc1cc5684c98d19816d5cc81702d70f2a0debbad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`unicode-bidi`**-[CSS](/de/docs/Web/CSS)-Eigenschaft bestimmt zusammen mit der {{cssxref("direction")}}-Eigenschaft, wie bidirektionaler Text in einem Dokument behandelt wird. Wenn z.B. ein Inhaltsblock sowohl von links nach rechts als auch von rechts nach links verlaufenden Text enthält, verwendet der User-Agent einen komplexen Unicode-Algorithmus, um zu entscheiden, wie der Text angezeigt wird. Die `unicode-bidi`-Eigenschaft überschreibt diesen Algorithmus und ermöglicht es dem Entwickler, das Text-Embedding zu steuern.
+Die **`unicode-bidi`** [CSS](/de/docs/Web/CSS)-Eigenschaft bestimmt zusammen mit der {{cssxref("direction")}}-Eigenschaft, wie bidirektionaler Text in einem Dokument behandelt wird. Wenn ein Inhaltsblock sowohl von links nach rechts als auch von rechts nach links verlaufenden Text enthält, verwendet der Benutzeragent beispielsweise einen komplexen Unicode-Algorithmus, um zu entscheiden, wie der Text angezeigt wird. Die `unicode-bidi`-Eigenschaft überschreibt diesen Algorithmus und ermöglicht es dem Entwickler, die Texteingebettung zu steuern.
 
 {{EmbedInteractiveExample("pages/css/unicode-bidi.html")}}
 
-Die `unicode-bidi`- und {{cssxref("direction")}}-Eigenschaften sind die einzigen Eigenschaften, die nicht von der {{cssxref("all")}}-Kurzschrift betroffen sind.
+Die `unicode-bidi`- und {{cssxref("direction")}}-Eigenschaften sind die einzigen Eigenschaften, die nicht von der {{cssxref("all")}}-Kurzform betroffen sind.
 
 > [!WARNING]
-> Diese Eigenschaft ist für Dokumenttyp-Definitionsdesigner (DTD) gedacht. Webdesigner und ähnliche Autoren **sollten** sie **nicht** überschreiben.
+> Diese Eigenschaft ist für Designer von Dokumenttypspezifikationen (DTD) gedacht. Webdesigner und ähnliche Autoren **sollten** diese nicht überschreiben.
 
 ## Syntax
 
@@ -38,17 +38,17 @@ unicode-bidi: unset;
 ### Werte
 
 - `normal`
-  - : Das Element bietet kein zusätzliches Embedding-Level in Bezug auf den bidirektionalen Algorithmus. Bei Inline-Elementen funktioniert die implizite Neuordnung über Elementgrenzen hinweg.
+  - : Das Element bietet keine zusätzliche Einbettungsebene in Bezug auf den bidirektionalen Algorithmus. Für Inline-Elemente funktioniert die implizite Neuordnung über Elementgrenzen hinweg.
 - `embed`
-  - : Wenn das Element inline ist, öffnet dieser Wert ein zusätzliches Embedding-Level in Bezug auf den bidirektionalen Algorithmus. Die Richtung dieses Embedding-Levels wird durch die {{Cssxref("direction")}}-Eigenschaft bestimmt.
+  - : Wenn das Element inline ist, öffnet dieser Wert eine zusätzliche Einbettungsebene in Bezug auf den bidirektionalen Algorithmus. Die Richtung dieser Einbettungsebene wird durch die {{cssxref("direction")}}-Eigenschaft bestimmt.
 - `bidi-override`
-  - : Für Inline-Elemente wird hierdurch ein Override erstellt. Für Block-Container-Elemente wird dadurch ein Override für Inline-Level-Nachfahren erstellt, die sich nicht innerhalb eines anderen Block-Container-Elements befinden. Dies bedeutet, dass innerhalb des Elements die Neuordnung streng in der Reihenfolge gemäß der {{Cssxref("direction")}}-Eigenschaft erfolgt; der implizite Teil des bidirektionalen Algorithmus wird ignoriert.
+  - : Für Inline-Elemente wird eine Überschreibung erstellt. Für Block-Container-Elemente wird eine Überschreibung für Inline-Elemente, die nicht in einem anderen Block-Container-Element enthalten sind, erstellt. Dies bedeutet, dass innerhalb des Elements die Neuordnung streng sequenziell gemäß der {{cssxref("direction")}}-Eigenschaft erfolgt; der implizite Teil des bidirektionalen Algorithmus wird ignoriert.
 - `isolate`
-  - : Dieses Schlüsselwort gibt an, dass die Richtung des Container-Elements berechnet werden soll, ohne den Inhalt dieses Elements zu berücksichtigen. Das Element ist daher von seinen Geschwistern _isoliert_. Bei Anwendung seines bidirektionalen Auflösungsalgorithmus behandelt das Container-Element es wie ein oder mehrere `U+FFFC Object Replacement Character`, d.h. wie ein Bild.
+  - : Dieses Schlüsselwort gibt an, dass die Richtung des Containerelements ohne Berücksichtigung des Inhalts dieses Elements berechnet werden sollte. Das Element wird daher von seinen Geschwistern _isoliert_. Wenn der Algorithmus zur bidirektionalen Auflösung angewendet wird, behandelt das Containerelement es als ein oder mehrere `U+FFFC Object Replacement Character`, also wie ein Bild.
 - `isolate-override`
-  - : Dieses Schlüsselwort wendet das Isolationsverhalten des `isolate`-Schlüsselworts auf den umgebenden Inhalt und das Override-Verhalten des `bidi-override`-Schlüsselworts auf den inneren Inhalt an.
+  - : Dieses Schlüsselwort wendet das Isolationsverhalten des `isolate`-Schlüsselworts auf den umgebenden Inhalt und das Überschreibungsverhalten des `bidi-override`-Schlüsselworts auf den inneren Inhalt an.
 - `plaintext`
-  - : Dieses Schlüsselwort lässt die Richtung des Elements berechnen, ohne den bidirektionalen Status des Elternteils oder den Wert der {{cssxref("direction")}}-Eigenschaft zu berücksichtigen. Die Richtung wird unter Verwendung der P2- und P3-Regeln des Unicode-Bidirektionalen-Algorithmus berechnet. Dieser Wert ermöglicht die Anzeige von Daten, die bereits mit einem Tool formatiert sind, das dem Unicode-Bidirektionalen-Algorithmus folgt.
+  - : Dieses Schlüsselwort sorgt dafür, dass die Richtung des Elements berechnet wird, ohne den bidirektionalen Zustand des Elternteils oder den Wert der {{cssxref("direction")}}-Eigenschaft zu berücksichtigen. Die Richtung wird unter Verwendung der P2- und P3-Regeln des Unicode-Bidirektionalen-Algorithmus berechnet. Dieser Wert ermöglicht die Anzeige von Daten, die bereits mit einem Tool formatiert wurden, das dem Unicode-Bidirektionalen-Algorithmus folgt.
 
 ## Formale Definition
 
@@ -91,3 +91,4 @@ unicode-bidi: unset;
 ## Siehe auch
 
 - {{Cssxref("direction")}}
+- SVG {{SVGAttr("unicode-bidi")}}-Attribut
diff --git a/files/de/web/css/visibility/index.md b/files/de/web/css/visibility/index.md
index dc5ed5676..0d82bd4ec 100644
--- a/files/de/web/css/visibility/index.md
+++ b/files/de/web/css/visibility/index.md
@@ -2,16 +2,16 @@
 title: visibility
 slug: Web/CSS/visibility
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`visibility`** [CSS](/de/docs/Web/CSS)-Eigenschaft zeigt oder versteckt ein Element, ohne das Layout eines Dokuments zu verändern. Die Eigenschaft kann auch Zeilen oder Spalten in einem {{HTMLElement("table")}} verbergen.
+Die **`visibility`**-Eigenschaft von [CSS](/de/docs/Web/CSS) zeigt oder verbirgt ein Element, ohne das Layout eines Dokuments zu verändern. Die Eigenschaft kann auch Zeilen oder Spalten in einer {{HTMLElement("table")}} ausblenden.
 
 {{EmbedInteractiveExample("pages/css/visibility.html")}}
 
-Um ein Element _zu verstecken und gleichzeitig aus dem Dokumentenlayout zu entfernen_, setzen Sie die {{cssxref("display")}}-Eigenschaft auf `none` anstatt `visibility` zu verwenden.
+Um ein Element _sowohl auszublenden als auch aus dem Dokumentenlayout zu entfernen_, setzen Sie die {{cssxref("display")}}-Eigenschaft auf `none`, anstatt `visibility` zu verwenden.
 
 ## Syntax
 
@@ -29,35 +29,35 @@ visibility: revert-layer;
 visibility: unset;
 ```
 
-Die `visibility`-Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte spezifiziert.
+Die `visibility`-Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.
 
 ### Werte
 
 - `visible`
   - : Das Elementfeld ist sichtbar.
 - `hidden`
-  - : Das Elementfeld ist unsichtbar (nicht gezeichnet), beeinflusst jedoch das Layout wie gewohnt. Nachfahren des Elements sind sichtbar, wenn ihre `visibility` auf `visible` gesetzt ist. Das Element kann keinen Fokus erhalten (z. B. beim Navigieren durch [Tab-Indizes](/de/docs/Web/HTML/Global_attributes/tabindex)).
+  - : Das Elementfeld ist unsichtbar (nicht gezeichnet), beeinflusst das Layout jedoch normal. Nachkommende Elemente werden sichtbar sein, wenn sie `visibility` auf `visible` gesetzt haben. Das Element kann keinen Fokus erhalten (wie beim Navigieren durch [Tab-Indizes](/de/docs/Web/HTML/Global_attributes/tabindex)).
 - `collapse`
 
   - : Das `collapse`-Schlüsselwort hat unterschiedliche Auswirkungen auf verschiedene Elemente:
 
-    - Für {{HTMLElement("table")}}-Zeilen, -Spalten, -Spaltengruppen und -Zeilengruppen werden die Zeile(n) oder Spalte(n) versteckt und der Platz, den sie eingenommen hätten, wird entfernt (als ob `{{Cssxref("display")}}: none` auf die Spalte/Zeile der Tabelle angewendet worden wäre). Die Größe anderer Zeilen und Spalten wird jedoch weiterhin berechnet, als ob die Zellen in der zusammengebrochenen(n) Zeile oder Spalte vorhanden wären. Dieser Wert ermöglicht die schnelle Entfernung einer Zeile oder Spalte aus einer Tabelle, ohne die Neuberechnung von Breiten und Höhen für die gesamte Tabelle erzwingen zu müssen.
-    - Zusammengebrochene Flex-Elemente und Ruby-Anmerkungen sind versteckt und der Platz, den sie eingenommen hätten, wird entfernt.
+    - Für Zeilen, Spalten, Spaltengruppen und Zeilengruppen einer {{HTMLElement("table")}} sind die Zeile(n) oder Spalte(n) ausgeblendet und der Platz, den sie eingenommen hätten, wird entfernt (als ob `{{Cssxref("display")}}: none` auf die Spalte/Zeile der Tabelle angewendet worden wäre). Die Größe anderer Zeilen und Spalten wird jedoch immer noch so berechnet, als wären die Zellen in den ausgeblendeten Zeilen oder Spalten vorhanden. Dieser Wert ermöglicht die schnelle Entfernung einer Zeile oder Spalte aus einer Tabelle, ohne eine Neuberechnung der Breiten und Höhen für die gesamte Tabelle zu erzwingen.
+    - Zusammengestellte Flex-Elemente und Ruby-Anmerkungen sind ausgeblendet, und der Platz, den sie eingenommen hätten, wird entfernt.
     - Für andere Elemente wird `collapse` wie `hidden` behandelt.
 
 ## Barrierefreiheit
 
-Die Verwendung eines `visibility`-Wertes von `hidden` bei einem Element entfernt es aus dem [Barrierefreiheitsbaum](/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#accessibility_apis). Dies wird dazu führen, dass das Element und alle seine nachfolgenden Elemente nicht mehr von Bildschirmlesetechnologien angesagt werden.
+Die Verwendung eines `visibility`-Werts von `hidden` bei einem Element entfernt es aus dem [Barrierefreiheitsbaum](/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#accessibility_apis). Dadurch werden das Element und alle seine nachfolgenden Elemente nicht mehr von Bildschirmlesetechnologien angekündigt.
 
 ## Interpolation
 
-Wenn animiert, werden Sichtbarkeitswerte zwischen _sichtbar_ und _nicht sichtbar_ interpoliert. Einer der Start- oder Endwerte muss daher `visible` sein, damit eine {{Glossary("interpolation", "Interpolation")}} stattfinden kann. Der Wert wird als diskreter Schritt interpoliert, wobei Werte der Übergangsfunktion zwischen `0` und `1` zu `visible` und andere Werte der Übergangsfunktion (die nur am Anfang/Ende des Übergangs auftreten oder als Ergebnis von `cubic-bezier()`-Funktionen mit y-Werten außerhalb von \[0, 1]) zum näheren Endpunkt abgebildet werden.
+Beim Animieren werden Sichtbarkeitswerte zwischen _sichtbar_ und _nicht-sichtbar_ interpoliert. Eines der Start- oder Endwerte muss daher `visible` sein, damit eine {{Glossary("interpolation", "Interpolation")}} stattfinden kann. Der Wert wird als diskreter Schritt interpoliert, bei dem Werte der Übergangsfunktion zwischen `0` und `1` auf `visible` abgebildet werden und andere Werte der Übergangsfunktion (die nur zu Beginn/Ende des Übergangs oder als Ergebnis von `cubic-bezier()`-Funktionen mit y-Werten außerhalb von \[0, 1] auftreten) auf den näheren Endpunkt abgebildet werden.
 
 ## Hinweise
 
-- Die Unterstützung für `visibility: collapse` fehlt oder ist in einigen modernen Browsern teilweise falsch. Es kann nicht korrekt wie `visibility: hidden` bei anderen Elementen als Tabellenzeilen und -spalten behandelt werden.
-- Wenn es auf Tabellenzeilen angewendet wird, kann eine Zelle ({{htmlelement("td")}} {{htmlelement("tr")}} Elemente), die sowohl sichtbare als auch zusammengebrochene Zeilen überspannt, auf unerwartete Weise gerendert werden. Wenn sich die überspannende Zelle in einer zusammengebrochenen Zeile befindet, rendern Browser die Tabellenzelle nicht, als ob die Zellen in den nachfolgenden Zeilen vorhanden wären, bei denen `visibility: collapse` angewendet wird. Wenn die Zelle in einer sichtbaren Zeile definiert ist und eine zusammengebrochene Zeile überspannt, werden die Zellinhalte nicht neu angeordnet, aber die Darstellung der Zelle selbst variiert je nach Browser. Die meisten Browser reduzieren die Blockgröße der Zelle um die Blockgröße der versteckten Zeile. Dies bedeutet, dass die Inhalte größer als die Zelle in der Block-Richtung sein können. Abhängig vom Browser werden die überlaufenden Inhalte entweder abgeschnitten, als ob `overflow: hidden` gesetzt wäre, während in anderen Browsern der Inhalt in die nachfolgende Zeile übergeht, als ob `overflow: visible` gesetzt wäre. In anderen Browsern wird die Zelle dargestellt, als ob die Zeile nicht zusammengebrochen wäre, wobei alle anderen Zellen in der Zeile versteckt sind, als ob `visibility: collapse` auf einzelne Zellen anstelle der Zeile selbst angewendet worden wäre.
-- `visibility: collapse` kann das Layout einer Tabelle ändern, wenn die Tabelle verschachtelte Tabellen innerhalb der Zellen enthält, die zusammengebrochen sind, es sei denn, `visibility: visible` wird explizit auf verschachtelte Tabellen angewendet.
+- Die Unterstützung für `visibility: collapse` fehlt oder ist in einigen modernen Browsern teilweise fehlerhaft. Es kann nicht korrekt wie `visibility: hidden` bei anderen Elementen als Tabellenzeilen und -spalten behandelt werden.
+- Wenn auf Tabellenzeilen angewendet, enthält die Tabelle Zellen ({{htmlelement("td")}} {{htmlelement("tr")}}-Elemente), die sowohl sichtbare als auch zusammengeklappte Zeilen überspannen, kann die Zelle auf unerwartete Weise gerendert werden. Wenn die überspannende Zelle in einer zusammengeklappten Zeile definiert ist, rendern Browser die Tabellenzelle nicht, als ob die Zellen in nachfolgenden Zeilen mit `visibility: collapse` vorhanden wären. Wenn die Zelle in einer sichtbaren Zeile definiert ist und eine zusammengeklappte Zeile überspannt, werden die Zellinhalte nicht neu angeordnet, jedoch variiert die Darstellung der Zelle selbst je nach Browser. Die meisten Browser verringern die Blockgröße der Zelle um die Blockgröße der versteckten Zeile. Dies bedeutet, dass die Inhalte möglicherweise größer sind als die Zelle in der Blockrichtungsrichtung. Je nach Browser werden die überstehenden Inhalte entweder abgeschnitten, als ob `overflow: hidden` eingestellt wäre, während in anderen Browsern die Inhalte in die nachfolgende Zeile hineinbluten, als ob `overflow: visible` eingestellt wäre. In anderen Browsern wird die Zelle gerendert, als ob die Zeile nicht zusammengeklappt wäre, mit allen anderen Zellen in der Zeile verborgen, als ob `visibility: collapse` auf einzelne Zellen angewendet worden wäre und nicht auf die Zeile selbst.
+- `visibility: collapse` kann das Layout einer Tabelle ändern, wenn die Tabelle verschachtelte Tabellen innerhalb der Zellen enthält, die zusammengeklappt sind, es sei denn, `visibility: visible` ist explizit auf verschachtelte Tabellen festgelegt.
 
 ## Formale Definition
 
@@ -149,3 +149,4 @@ td {
 ## Siehe auch
 
 - {{cssxref("display")}}
+- SVG {{SVGAttr("visibility")}} Attribut
diff --git a/files/de/web/css/width/index.md b/files/de/web/css/width/index.md
index 5e421ca05..7e50ead43 100644
--- a/files/de/web/css/width/index.md
+++ b/files/de/web/css/width/index.md
@@ -2,22 +2,22 @@
 title: width
 slug: Web/CSS/width
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`width`** [CSS](/de/docs/Web/CSS)-Eigenschaft legt die Breite eines Elements fest. Standardmäßig bestimmt sie die Breite des [Inhaltsbereichs](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#content_area), aber wenn {{cssxref("box-sizing")}} auf `border-box` gesetzt ist, legt sie die Breite des [Rahmenbereichs](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#border_area) fest.
+Die **`width`** [CSS](/de/docs/Web/CSS)-Eigenschaft legt die Breite eines Elements fest. Standardmäßig setzt sie die Breite des [Inhaltsbereichs](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#content_area), aber wenn {{cssxref("box-sizing")}} auf `border-box` gesetzt ist, legt sie die Breite des [Randbereichs](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#border_area) fest.
 
 {{EmbedInteractiveExample("pages/css/width.html")}}
 
-Der angegebene Wert der `width` gilt für den Inhaltsbereich, solange der Wert innerhalb der durch {{cssxref("min-width")}} und {{cssxref("max-width")}} definierten Werte bleibt.
+Der angegebene Wert von `width` gilt für den Inhaltsbereich, solange er innerhalb der durch {{cssxref("min-width")}} und {{cssxref("max-width")}} definierten Werte bleibt.
 
-- Wenn der Wert für `width` kleiner ist als der Wert von `min-width`, dann überschreibt `min-width` die `width`.
-- Wenn der Wert für `width` größer ist als der Wert von `max-width`, dann überschreibt `max-width` die `width`.
+- Wenn der Wert für `width` kleiner als der Wert für `min-width` ist, überschreibt `min-width` `width`.
+- Wenn der Wert für `width` größer als der Wert für `max-width` ist, überschreibt `max-width` `width`.
 
 > [!NOTE]
-> Als geometrische Eigenschaft gilt `width` auch für die {{SVGElement("svg")}}, {{SVGElement("rect")}}, {{SVGElement("image")}} und {{SVGElement("foreignObject")}} SVG-Elemente, wobei `auto` für `<svg>` zu `100%` und für andere Elemente zu `0` aufgelöst wird, und Prozentwerte relativ zur Breite des SVG-Viewports für `<rect>` sind. Der CSS-`width`-Eigenschaftswert überschreibt jeden SVG-{{SVGAttr("width")}}-Attributwert, der auf dem SVG-Element gesetzt ist.
+> Als geometrische Eigenschaft gilt `width` auch für die {{SVGElement("svg")}}, {{SVGElement("rect")}}, {{SVGElement("image")}} und {{SVGElement("foreignObject")}} SVG-Elemente, wobei `auto` für `<svg>` auf `100%` und für andere Elemente auf `0` aufgelöst wird, und Prozentwerte relativ zur SVG-Viewframebreite für `<rect>` sind. Der CSS-`width`-Eigenschaftswert überschreibt jeden SVG-{{SVGAttr("width")}}-Attributwert, der auf dem SVG-Element gesetzt ist.
 
 ## Syntax
 
@@ -50,32 +50,32 @@ width: unset;
 ### Werte
 
 - {{cssxref("&lt;length&gt;")}}
-  - : Definiert die Breite als Entfernungswert.
+  - : Definiert die Breite als Distanzwert.
 - {{cssxref("&lt;percentage&gt;")}}
-  - : Definiert die Breite als Prozentsatz der Breite des [enthältenden Blocks](/de/docs/Web/CSS/Containing_block).
+  - : Definiert die Breite als Prozentsatz der Breite des [umgebenden Blocks](/de/docs/Web/CSS/Containing_block).
 - `auto`
   - : Der Browser berechnet und wählt eine Breite für das angegebene Element.
 - `max-content`
-  - : Die intrinsische bevorzugte Breite.
+  - : Die intrinsic bevorzugte Breite.
 - `min-content`
-  - : Die intrinsische Mindestbreite.
+  - : Die intrinsic minimale Breite.
 - `fit-content`
-  - : Verwendet den verfügbaren Raum, aber nicht mehr als [max-content](/de/docs/Web/CSS/max-content), d.h. `min(max-content, max(min-content, stretch))`.
+  - : Nutzt den verfügbaren Platz, aber nicht mehr als [max-content](/de/docs/Web/CSS/max-content), d.h. `min(max-content, max(min-content, stretch))`.
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
-  - : Verwendet die fit-content-Formel mit dem verfügbaren Raum, der durch das angegebene Argument ersetzt wird, d.h. `min(max-content, max(min-content, <length-percentage>))`.
+  - : Verwendet die fit-content-Formel mit dem verfügbaren Raum ersetzt durch das angegebene Argument, d.h. `min(max-content, max(min-content, <length-percentage>))`.
 - `stretch`
 
-  - : Setzt die Breite des [Randbereichs](/de/docs/Learn_web_development/Core/Styling_basics/Box_model#parts_of_a_box) des Elements auf die Breite des [enthältenden Blocks](/de/docs/Web/CSS/Containing_block#identifying_the_containing_block). Es wird versucht, den Randbereich so zu gestalten, dass er den verfügbaren Raum im enthältenden Block füllt, verhält sich also in gewisser Weise ähnlich wie `100%`, wendet die resultierende Größe jedoch auf den Randbereich an, anstatt auf den durch [box-sizing](/de/docs/Web/CSS/box-sizing) bestimmten Bereich.
+  - : Setzt die Breite der [Margin-Box](/de/docs/Learn_web_development/Core/Styling_basics/Box_model#parts_of_a_box) des Elements auf die Breite seines [umgebenden Blocks](/de/docs/Web/CSS/Containing_block#identifying_the_containing_block). Es versucht, die Margin-Box an den verfügbaren Raum im umgebenden Block anzupassen, verhält sich also ähnlich wie `100%`, jedoch wird die resultierende Größe auf die Margin-Box angewendet und nicht auf die Box, die durch [box-sizing](/de/docs/Web/CSS/box-sizing) bestimmt ist.
 
     > [!NOTE]
-    > Um die von Browsern verwendeten Aliase für den `stretch`-Wert und dessen Implementierungsstatus zu überprüfen, siehe den Abschnitt [Browser-Kompatibilität](#browser-kompatibilität).
+    > Um Aliase zu prüfen, die von Browsern für den `stretch`-Wert verwendet werden und deren Implementierungsstatus zu erfahren, siehe den Abschnitt [Browser-Kompatibilität](#browser-kompatibilität).
 
 ## Barrierefreiheit
 
-Stellen Sie sicher, dass Elemente mit einer `width`-Einstellung nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.
+Stellen Sie sicher, dass Elemente mit gesetztem `width` nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.
 
-- [MDN-Verständnis der WCAG, Erklärungen zur Richtlinie 1.4](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [Verständnis des Erfolgskriteriums 1.4.4 | W3C-Verständnis von WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+- [MDN Understanding WCAG, Guideline 1.4 explanations](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
 
 ## Formale Definition
 
@@ -101,7 +101,7 @@ p.goldie {
 
 {{EmbedLiveSample('Default_width', '500px', '64px')}}
 
-### Beispiel mit Pixeln und Ems
+### Beispiel mit Pixeln und ems
 
 ```css
 .px_length {
@@ -126,7 +126,7 @@ p.goldie {
 
 {{EmbedLiveSample('Example using pixels and ems', '500px', '64px')}}
 
-### Beispiel mit Prozent
+### Beispiel mit Prozentwert
 
 ```css
 .percent {
@@ -187,5 +187,6 @@ p.min-blue {
 - {{cssxref("min-width")}}, {{cssxref("max-width")}}
 - {{cssxref("block-size")}}, {{cssxref("inline-size")}}
 - {{cssxref("anchor-size()")}}
-- [Einführung in das CSS-Grundboxmodell](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
-- [CSS-Boxmodell](/de/docs/Web/CSS/CSS_box_model)-Modul
+- SVG {{SVGAttr("width")}} Attribut
+- [Einführung in das grundlegende CSS-Box-Modell](/de/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
+- [CSS-Box-Modell](/de/docs/Web/CSS/CSS_box_model) Modul
diff --git a/files/de/web/css/word-spacing/index.md b/files/de/web/css/word-spacing/index.md
index 1df3bbc83..a64a91bf7 100644
--- a/files/de/web/css/word-spacing/index.md
+++ b/files/de/web/css/word-spacing/index.md
@@ -2,7 +2,7 @@
 title: word-spacing
 slug: Web/CSS/word-spacing
 l10n:
-  sourceCommit: 3928d2b1004e2435e063ef4b037e06e1906d62f3
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
@@ -34,16 +34,16 @@ word-spacing: unset;
 - `normal`
   - : Der normale Wortzwischenraum, wie er durch die aktuelle Schriftart und/oder den Browser definiert ist.
 - {{cssxref("length")}}
-  - : Gibt zusätzlichen Abstand an, zusätzlich zu dem intrinsischen Wortzwischenraum, der durch die Schriftart definiert ist.
+  - : Gibt zusätzlichen Abstand an, der über den von der Schriftart definierten intrinsischen Wortzwischenraum hinausgeht.
 
 ## Barrierefreiheit
 
-Ein großer positiver oder negativer `word-spacing`-Wert macht die Sätze, auf die das Styling angewendet wird, unlesbar. Bei Texten, die mit einem sehr großen positiven Wert gestylt sind, werden die Wörter so weit auseinander sein, dass es nicht mehr als Satz erscheint. Bei Texten mit einem großen negativen Wert überlappen sich die Wörter so stark, dass der Anfang und das Ende jedes Wortes unkenntlich werden.
+Ein großer positiver oder negativer Wert für `word-spacing` macht die Sätze, auf die die Gestaltung angewendet wird, unlesbar. Bei mit einem sehr großen positiven Wert gestalltetem Text sind die Wörter so weit auseinander, dass es nicht mehr wie ein Satz wirkt. Bei mit einem großen negativen Wert gestyltem Text überlappen sich die Wörter so stark, dass Anfang und Ende jedes Wortes nicht mehr erkennbar sind.
 
-Lesbarer `word-spacing` muss von Fall zu Fall bestimmt werden, da unterschiedliche Schriftarten unterschiedliche Zeichenbreiten haben. Es gibt keinen Wert, der automatisch sicherstellt, dass alle Schriftarten ihre Lesbarkeit behalten.
+Lesbare `word-spacing`-Werte müssen fallweise ermittelt werden, da unterschiedliche Schriftfamilien unterschiedliche Zeichenbreiten haben. Es gibt keinen einzigen Wert, der sicherstellt, dass alle Schriftfamilien automatisch ihre Lesbarkeit behalten.
 
-- [MDN-Verstehen der WCAG, Erklärung zu Richtlinie 1.4](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [Verständnis des Erfolgskriteriums 1.4.8 | W3C-Verständnis von WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+- [MDN Verständnis von WCAG, Richtlinie 1.4 Erklärungen](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Verständnis des Erfolgskriteriums 1.4.8 | W3C Verständnis von WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
 
 ## Beispiele
 
@@ -87,3 +87,4 @@ Lesbarer `word-spacing` muss von Fall zu Fall bestimmt werden, da unterschiedlic
 ## Siehe auch
 
 - {{cssxref("letter-spacing")}}
+- SVG-Attribut {{SVGAttr("word-spacin")}}
diff --git a/files/de/web/css/writing-mode/index.md b/files/de/web/css/writing-mode/index.md
index 95ad0c4d0..cff54602e 100644
--- a/files/de/web/css/writing-mode/index.md
+++ b/files/de/web/css/writing-mode/index.md
@@ -2,16 +2,16 @@
 title: writing-mode
 slug: Web/CSS/writing-mode
 l10n:
-  sourceCommit: 3344de5f35ac61024cb699883754090ed29b6f96
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{CSSRef}}
 
-Die **`writing-mode`** [CSS](/de/docs/Web/CSS)-Eigenschaft legt fest, ob Textzeilen horizontal oder vertikal angeordnet werden und in welche Richtung sich Blöcke fortbewegen. Wird diese Eigenschaft für ein gesamtes Dokument festgelegt, sollte sie auf dem Wurzelelement (dem `html`-Element für HTML-Dokumente) gesetzt werden.
+Die **`writing-mode`** [CSS](/de/docs/Web/CSS) Eigenschaft legt fest, ob Textzeilen horizontal oder vertikal angeordnet werden, sowie die Richtung, in der sich Blöcke fortsetzen. Wenn es für ein gesamtes Dokument festgelegt wird, sollte es auf dem Root-Element (dem `html`-Element für HTML-Dokumente) gesetzt werden.
 
 {{EmbedInteractiveExample("pages/css/writing-mode.html")}}
 
-Diese Eigenschaft gibt die _Blockflussrichtung_ an, also die Richtung, in der Block-Container gestapelt werden, und die Richtung, in der inline-Level-Inhalte innerhalb eines Block-Containers fließen. Dadurch wird auch die Reihenfolge von Block-Level-Inhalten bestimmt.
+Diese Eigenschaft spezifiziert die _Blockflussrichtung_, also die Richtung, in der Block-Container gestapelt werden, und die Richtung, in der Inline-Inhalte innerhalb eines Block-Containers fließen. Sie bestimmt daher auch die Anordnung der Block-Inhalte.
 
 ## Syntax
 
@@ -31,7 +31,7 @@ writing-mode: revert-layer;
 writing-mode: unset;
 ```
 
-Die `writing-mode`-Eigenschaft wird als einer der unten aufgeführten Werte angegeben. Die Flussrichtung in horizontalen Schriften wird auch von der [Richtungsläufigkeit dieser Schrift](https://www.w3.org/International/questions/qa-scripts.en) beeinflusst, entweder von links nach rechts (`ltr`, wie Englisch und die meisten anderen Sprachen) oder von rechts nach links (`rtl`, wie Hebräisch oder Arabisch).
+Die `writing-mode` Eigenschaft wird als einer der unten aufgeführten Werte angegeben. Die Flussrichtung in horizontalen Schriften wird auch von der [Richtung dieser Schrift](https://www.w3.org/International/questions/qa-scripts.en) beeinflusst, entweder von links nach rechts (`ltr`, wie Englisch und die meisten anderen Sprachen) oder von rechts nach links (`rtl`, wie Hebräisch oder Arabisch).
 
 ### Werte
 
@@ -42,21 +42,21 @@ Die `writing-mode`-Eigenschaft wird als einer der unten aufgeführten Werte ange
 - `vertical-lr`
   - : Für `ltr`-Schriften fließt der Inhalt vertikal von oben nach unten, und die nächste vertikale Zeile wird rechts von der vorherigen Zeile positioniert. Für `rtl`-Schriften fließt der Inhalt vertikal von unten nach oben, und die nächste vertikale Zeile wird links von der vorherigen Zeile positioniert.
 - `sideways-rl`
-  - : Für `ltr`-Schriften fließt der Inhalt vertikal von oben nach unten. Für `rtl`-Schriften fließt der Inhalt vertikal von unten nach oben. Alle Glyphen, selbst in vertikalen Schriften, sind seitlich nach rechts ausgerichtet.
+  - : Für `ltr`-Schriften fließt der Inhalt vertikal von oben nach unten. Für `rtl`-Schriften fließt der Inhalt vertikal von unten nach oben. Alle Schriftzeichen, auch die in vertikalen Schriften, sind seitlich nach rechts ausgerichtet.
 - `sideways-lr`
-  - : Für `ltr`-Schriften fließt der Inhalt vertikal von unten nach oben. Für `rtl`-Schriften fließt der Inhalt vertikal von oben nach unten. Alle Glyphen, selbst in vertikalen Schriften, sind seitlich nach links ausgerichtet.
+  - : Für `ltr`-Schriften fließt der Inhalt vertikal von unten nach oben. Für `rtl`-Schriften fließt der Inhalt vertikal von oben nach unten. Alle Schriftzeichen, auch die in vertikalen Schriften, sind seitlich nach links ausgerichtet.
 - `lr`
-  - : Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessen `horizontal-tb`.
+  - : Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen `horizontal-tb` verwenden.
 - `lr-tb`
-  - : Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessen `horizontal-tb`.
+  - : Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen `horizontal-tb` verwenden.
 - `rl`
-  - : Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessen `horizontal-tb`.
+  - : Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen `horizontal-tb` verwenden.
 - `tb`
-  - : Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessen `vertical-lr`.
+  - : Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen `vertical-lr` verwenden.
 - `tb-lr` {{Deprecated_Inline}}
-  - : Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessen `vertical-lr`.
+  - : Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen `vertical-lr` verwenden.
 - `tb-rl`
-  - : Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessen `vertical-rl`.
+  - : Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen `vertical-rl` verwenden.
 
 ## Formale Definition
 
@@ -70,11 +70,11 @@ Die `writing-mode`-Eigenschaft wird als einer der unten aufgeführten Werte ange
 
 ### Verwendung mehrerer Schreibmodi
 
-Dieses Beispiel zeigt alle Schreibmodi, wobei jeder Modus mit Text in verschiedenen Sprachen dargestellt wird.
+Dieses Beispiel zeigt alle Schreibmodi, wobei jeder mit Text in verschiedenen Sprachen dargestellt wird.
 
 #### HTML
 
-Das HTML ist eine {{HTMLElement("table")}} mit jedem Schreibmodus in einer Zeile und einer Spalte, in der Text in verschiedenen Schriftsystemen unter Verwendung dieses Schreibmodus angezeigt wird.
+Das HTML ist ein {{HTMLElement("table")}}, in dem jeder Schreibmodus in einer Zeile mit einer Spalte angezeigt wird, die Text in verschiedenen Schriften mit diesem Schreibmodus verwendet.
 
 ```html
 <table>
@@ -165,7 +165,7 @@ th {
 }
 ```
 
-Das CSS, das die Richtung der Inhalte anpasst, sieht folgendermaßen aus:
+Das CSS, das die Richtung des Inhalts anpasst, sieht so aus:
 
 ```css
 .text1 td {
@@ -195,7 +195,7 @@ Das CSS, das die Richtung der Inhalte anpasst, sieht folgendermaßen aus:
 
 ### Verwendung von writing-mode mit Transformationen
 
-Falls Ihr Browser `sideways-lr` nicht unterstützt, können Sie durch Verwendung von {{cssxref("transform")}} einen ähnlichen Effekt je nach Schriftverkehrsrichtung erzielen. Der Effekt von `vertical-rl` ist der gleiche wie bei `sideways-lr`, daher ist keine Transformation für von links nach rechts gerichtete Schriften erforderlich. In einigen Fällen reicht es aus, den Text um 180 Grad zu drehen, um den Effekt von `sideways-lr` zu erzielen, aber Schriftzeichen sind möglicherweise nicht darauf ausgelegt, gedreht zu werden, was zu unerwarteten Positionierungen oder Darstellungen führen kann.
+Wenn Ihr Browser `sideways-lr` nicht unterstützt, besteht ein Workaround darin, {{cssxref("transform")}} zu verwenden, um einen ähnlichen Effekt in Abhängigkeit von der Schreibrichtung zu erzielen. Der Effekt von `vertical-rl` ist derselbe wie bei `sideways-lr`, sodass für Schriften von links nach rechts keine Transformation erforderlich ist. In einigen Fällen genügt es, den Text um 180 Grad zu drehen, um den Effekt von `sideways-lr` zu erzielen, aber Schriftzeichen können möglicherweise nicht für eine Drehung ausgelegt sein, was zu unerwarteter Positionierung oder Darstellung führen kann.
 
 #### HTML
 
@@ -289,12 +289,12 @@ span {
 
 ## Siehe auch
 
-- SVG-[`writing-mode`](/de/docs/Web/SVG/Attribute/writing-mode) Attribut
 - {{Cssxref("direction")}}
 - {{Cssxref("unicode-bidi")}}
 - {{Cssxref("text-orientation")}}
 - {{Cssxref("text-combine-upright")}}
 - [CSS logische Eigenschaften](/de/docs/Web/CSS/CSS_logical_properties_and_values)
-- [Gestaltung von vertikalem Text (Chinesisch, Japanisch, Koreanisch und Mongolisch)](https://www.w3.org/International/articles/vertical-text/) auf W3.org (2022)
-- [CSS Schreibmodul](/de/docs/Web/CSS/CSS_writing_modes)
-- [Erstellung vertikaler Formularelemente](/de/docs/Web/CSS/CSS_writing_modes/Vertical_controls)
+- [CSS Schreibmodi](/de/docs/Web/CSS/CSS_writing_modes) Modul
+- SVG {{SVGAttr("writing-mode")}} Attribut
+- [Styling vertikaler Text (Chinesisch, Japanisch, Koreanisch und Mongolisch)](https://www.w3.org/International/articles/vertical-text/) auf W3.org (2022)
+- [Erstellung vertikaler Formularsteuerelemente](/de/docs/Web/CSS/CSS_writing_modes/Vertical_controls)
diff --git a/files/de/web/svg/attribute/alignment-baseline/index.md b/files/de/web/svg/attribute/alignment-baseline/index.md
index 28dfdba16..f62535d78 100644
--- a/files/de/web/svg/attribute/alignment-baseline/index.md
+++ b/files/de/web/svg/attribute/alignment-baseline/index.md
@@ -2,12 +2,12 @@
 title: alignment-baseline
 slug: Web/SVG/Attribute/alignment-baseline
 l10n:
-  sourceCommit: 243e5eabfe95971f2850fcfdf2a7b2f210c85532
+  sourceCommit: 0a4d5b451cc54599ed2b99cef4fdd39c3fd96a3d
 ---
 
 {{SVGRef}}
 
-Das **`alignment-baseline`** Attribut gibt an, wie ein Objekt im Verhältnis zu seinem übergeordneten Element ausgerichtet wird. Diese Eigenschaft legt fest, welche Basislinie dieses Elements an der entsprechenden Basislinie des übergeordneten Elements ausgerichtet werden soll. Zum Beispiel ermöglicht dies, dass alphabetische Basislinien im römischen Text bei Änderungen der Schriftgröße ausgerichtet bleiben. Standardmäßig wird die Basislinie mit demselben Namen wie der berechnete Wert der `alignment-baseline` Eigenschaft verwendet.
+Das **`alignment-baseline`** Attribut legt fest, wie ein Objekt in Bezug auf sein übergeordnetes Element ausgerichtet wird. Diese Eigenschaft gibt an, welche Grundlinie dieses Elements mit der entsprechenden Grundlinie des übergeordneten Elements ausgerichtet werden soll. Zum Beispiel ermöglicht dies, dass {{Glossary("/Baseline/Typography", "alphabetische Grundlinien")}} in römischem Text über Schriftgrößenänderungen hinweg ausgerichtet bleiben. Standardmäßig wird die Grundlinie mit demselben Namen wie der berechnete Wert der `alignment-baseline` Eigenschaft verwendet.
 
 > [!NOTE]
 > Als Präsentationsattribut kann {{cssxref("alignment-baseline")}} als CSS-Eigenschaft verwendet werden.
@@ -46,51 +46,51 @@ Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 </table>
 
 - `auto` {{deprecated_inline}}
-  - : Der Wert ist die dominierende Basislinie des Skripts, zu dem das Zeichen gehört - d.h. nutzen Sie die dominierende Basislinie des übergeordneten Elements.
+  - : Der Wert ist die dominante Grundlinie des Skripts, zu dem das Zeichen gehört - d.h., verwenden Sie die dominante Grundlinie des übergeordneten Elements.
 - `baseline`
-  - : Verwendet die Wahl der {{svgattr("dominant-baseline")}} des übergeordneten Elements. Passt die entsprechende {{Glossary("baseline/typography", "Basislinie")}} des Rechtecks dem der übergeordneten Ebene an.
+  - : Verwendet die {{svgattr("dominant-baseline")}} Wahl des übergeordneten Elements. Passt die entsprechende {{Glossary("baseline/typography", "Grundlinie")}} der Box an die ihres übergeordneten Elements an.
 - `before-edge` {{deprecated_inline}}
-  - : Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "before-edge" Basislinie des übergeordneten Textelementinhalts ausgerichtet.
+  - : Der Ausrichtungspunkt des ausgerichteten Objekts ist mit der "before-edge"-Grundlinie des übergeordneten Textelementes ausgerichtet.
 - `text-bottom`
-  - : Passt den unteren Rand des Rechtecks an den oberen Rand des Inhaltsbereichs des übergeordneten Elements an.
+  - : Passt den unteren Rand der Box an den oberen Rand des Inhaltsbereichs des übergeordneten Elements an.
 - `text-before-edge`
 
-  - : Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "text-before-edge" Basislinie des übergeordneten Textelementinhalts ausgerichtet.
+  - : Der Ausrichtungspunkt des ausgerichteten Objekts ist mit der "text-before-edge"-Grundlinie des übergeordneten Textelementes ausgerichtet.
 
     > [!NOTE]
     > Dieses Schlüsselwort kann auf `text-top` abgebildet werden.
 
 - `middle`
-  - : Richtet den vertikalen Mittelpunkt des Rechtecks an der Basislinie des übergeordneten Rechtecks plus der halben x-Höhe des übergeordneten Elements aus.
+  - : Richtet den vertikalen Mittelpunkt der Box mit der Grundlinie des übergeordneten Elements plus die Hälfte der x-Höhe des übergeordneten Elements aus.
 - `central`
-  - : Passt die zentrale Basislinie des Rechtecks der zentralen Basislinie seines übergeordneten Elements an.
+  - : Passt die zentrale Grundlinie der Box an die zentrale Grundlinie ihres übergeordneten Elements an.
 - `after-edge` {{deprecated_inline}}
-  - : Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "after-edge" Basislinie des übergeordneten Textelementinhalts ausgerichtet.
+  - : Der Ausrichtungspunkt des ausgerichteten Objekts ist mit der "after-edge"-Grundlinie des übergeordneten Textelementes ausgerichtet.
 - `text-top`
-  - : Passt den oberen Rand des Rechtecks an den oberen Rand des Inhaltsbereichs des übergeordneten Elements an.
+  - : Passt den oberen Rand der Box an den oberen Rand des Inhaltsbereichs des übergeordneten Elements an.
 - `text-after-edge`
 
-  - : Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "text-after-edge" Basislinie des übergeordneten Textelementinhalts ausgerichtet.
+  - : Der Ausrichtungspunkt des ausgerichteten Objekts ist mit der "text-after-edge"-Grundlinie des übergeordneten Textelementes ausgerichtet.
 
     > [!NOTE]
     > Dieses Schlüsselwort kann auf `text-bottom` abgebildet werden.
 
 - `ideographic`
-  - : Passt die ideografische Zeichenfläche des Rechtecks der des übergeordneten Elements an.
+  - : Passt die ideographische Zeichenbasislinie der Box an die ihres übergeordneten Elements an.
 - `alphabetic`
-  - : Passt die alphabetische Basislinie des Rechtecks der des übergeordneten Elements an.
+  - : Passt die alphabetische Grundlinie der Box an die ihres übergeordneten Elements an.
 - `hanging`
-  - : Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "hanging" Basislinie des übergeordneten Textelementinhalts ausgerichtet.
+  - : Der Ausrichtungspunkt des ausgerichteten Objekts ist mit der "hanging"-Grundlinie des übergeordneten Textelementes ausgerichtet.
 - `mathematical`
-  - : Passt die mathematische Basislinie des Rechtecks der des übergeordneten Elements an.
+  - : Passt die mathematische Grundlinie der Box an die ihres übergeordneten Elements an.
 - `top`
-  - : Richtet den oberen Rand des ausgerichteten Teilbaums am oberen Rand des Linienrahmens aus.
+  - : Richtet den oberen Rand des ausgerichteten Teilbaums mit dem oberen Rand der Zeilenbox aus.
 - `center`
-  - : Richtet den Mittelpunkt des ausgerichteten Teilbaums am Mittelpunkt des Linienrahmens aus.
+  - : Richtet den Mittelpunkt des ausgerichteten Teilbaums mit dem Zentrum der Zeilenbox aus.
 - `bottom`
-  - : Richtet den unteren Rand des ausgerichteten Teilbaums am unteren Rand des Linienrahmens aus.
+  - : Richtet den unteren Rand des ausgerichteten Teilbaums mit dem unteren Rand der Zeilenbox aus.
 
-SVG 2 führt einige Änderungen an der Definition dieser Eigenschaft ein. Insbesondere: die Werte `auto`, `before-edge` und `after-edge` wurden entfernt. Für die Abwärtskompatibilität kann `text-before-edge` auf `text-top` und `text-after-edge` auf `text-bottom` abgebildet werden. Weder `text-before-edge` noch `text-after-edge` sollten mit der {{cssxref("vertical-align")}} Eigenschaft verwendet werden.
+SVG 2 führt einige Änderungen in der Definition dieser Eigenschaft ein. Insbesondere: die Werte `auto`, `before-edge` und `after-edge` wurden entfernt. Aus Gründen der Abwärtskompatibilität kann `text-before-edge` auf `text-top` und `text-after-edge` auf `text-bottom` abgebildet werden. Weder `text-before-edge` noch `text-after-edge` sollten mit der {{cssxref("vertical-align")}} Eigenschaft verwendet werden.
 
 ## Beispiel
 
@@ -133,7 +133,7 @@ SVG 2 führt einige Änderungen an der Definition dieser Eigenschaft ein. Insbes
 
 {{EmbedLiveSample("Example")}}
 
-Für die Objektausrichtung in anderen Elementen (wie {{SVGElement("text")}}) siehe {{SVGAttr("dominant-baseline")}}.
+Für die Objektausrichtung in anderen Elementen (wie {{SVGElement("text")}}), siehe {{SVGAttr("dominant-baseline")}}.
 
 ## Spezifikationen
 
@@ -145,4 +145,5 @@ Für die Objektausrichtung in anderen Elementen (wie {{SVGElement("text")}}) sie
 
 ## Siehe auch
 
-- [CSS-Baseline-Ausrichtung](/de/docs/Web/CSS/CSS_box_alignment/Box_alignment#baseline_alignment)
+- CSS {{cssxref("alignment-baseline")}} Eigenschaft
+- [CSS Grundlinienausrichtung](/de/docs/Web/CSS/CSS_box_alignment/Box_alignment#baseline_alignment)
diff --git a/files/de/web/svg/attribute/alphabetic/index.md b/files/de/web/svg/attribute/alphabetic/index.md
index 76a8b648f..cabe1fe15 100644
--- a/files/de/web/svg/attribute/alphabetic/index.md
+++ b/files/de/web/svg/attribute/alphabetic/index.md
@@ -2,20 +2,20 @@
 title: alphabetic
 slug: Web/SVG/Attribute/alphabetic
 l10n:
-  sourceCommit: b4f998244660723175f8e06b5d77f68cfb1d1f1a
+  sourceCommit: 0a4d5b451cc54599ed2b99cef4fdd39c3fd96a3d
 ---
 
 {{SVGRef}}{{deprecated_header}}
 
-Das **`alphabetic`** Attribut definiert die untere Grundlinie einer Schriftart. Es hat dieselbe Syntax und Semantik wie der {{cssxref("@font-face/baseline", "baseline")}} Deskriptor innerhalb eines {{cssxref("@font-face")}}.
+Das **`alphabetic`** Attribut definiert die untere Grundlinie einer Schriftart. Es hat die gleiche Syntax und Semantik wie der {{cssxref("@font-face/baseline", "baseline")}} Deskriptor innerhalb eines {{cssxref("@font-face")}}.
 
-Für horizontal ausgerichtete Glyphenlayouts gibt es die Koordinate für die Ausrichtung von Glyphen an, um die alphabetische Basislinienausrichtung zu erreichen. Der Wert ist ein Versatz im Schriftkoordinatensystem.
+Für horizontal ausgerichtete Glyphenlayouts gibt es die Ausrichtungskoordinate für Glyphen an, um eine {{Glossary("/Baseline/Typography", "alphabetische Grundlinie")}} zu erreichen. Der Wert ist ein Offset im Schriftart-Koordinatensystem.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement("font-face")}}
 
-## Anwendungshinweise
+## Verwendungshinweise
 
 <table class="properties">
   <tbody>
diff --git a/files/de/web/svg/attribute/clip-path/index.md b/files/de/web/svg/attribute/clip-path/index.md
index 9a1f6f817..0a39fa749 100644
--- a/files/de/web/svg/attribute/clip-path/index.md
+++ b/files/de/web/svg/attribute/clip-path/index.md
@@ -2,17 +2,17 @@
 title: clip-path
 slug: Web/SVG/Attribute/clip-path
 l10n:
-  sourceCommit: 6d311a5f07c97dbcd7bb9a6d49c2fe820a228659
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`clip-path`** Präsentationsattribut definiert oder verknüpft einen Clipping-Pfad mit dem zugehörigen Element.
+Das Präsentationsattribut **`clip-path`** definiert oder verbindet einen Clipping-Pfad mit dem Element, auf das es sich bezieht.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `clip-path` auch als CSS-Eigenschaft verwendet werden.
+> Als Präsentationsattribut kann `clip-path` als CSS-Eigenschaft verwendet werden.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement('a')}}
 - {{SVGElement('circle')}}
@@ -94,7 +94,7 @@ svg {
 
 {{EmbedLiveSample("Example", '100%', 200)}}
 
-## Verwendungshinweise
+## Anwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -117,10 +117,10 @@ svg {
 </table>
 
 - \<geometry-box>
-  - : Eine zusätzliche Information, um anzugeben, wie eine {{cssxref('basic-shape')}} auf ein Element angewendet wird: `fill-box` gibt an, die Objektbegrenzungsrahmen zu verwenden; `stroke-box` gibt an, die Objektbegrenzungsrahmen erweitert mit dem Strich zu verwenden; `view-box` gibt an, den nächstgelegenen SVG-Viewport als Referenzrahmen zu verwenden.
+  - : Zusätzliche Informationen, um anzugeben, wie eine {{cssxref('basic-shape')}} auf ein Element angewendet wird: `fill-box` gibt an, dass die Begrenzungsbox des Objekts verwendet wird; `stroke-box` gibt an, dass die Begrenzungsbox des Objekts, erweitert um den Strich, verwendet wird; `view-box` gibt an, dass der nächstgelegene SVG-Ansichtsbereich als Referenzbox verwendet wird.
 
 > [!NOTE]
-> Für mehr Details zur clip-path Syntax, siehe die CSS-Eigenschaftsreferenzseite {{cssxref('clip-path')}}.
+> Weitere Details zur clip-path-Syntax finden Sie auf der CSS-Eigenschaftsreferenzseite {{cssxref('clip-path')}}.
 
 ## Spezifikationen
 
@@ -132,4 +132,4 @@ svg {
 
 ## Siehe auch
 
-- Die CSS-Eigenschaft {{cssxref("clip-path")}}
+- CSS {{cssxref("clip-path")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/color-interpolation/index.md b/files/de/web/svg/attribute/color-interpolation/index.md
index a0bf3e066..0953accc1 100644
--- a/files/de/web/svg/attribute/color-interpolation/index.md
+++ b/files/de/web/svg/attribute/color-interpolation/index.md
@@ -2,24 +2,24 @@
 title: color-interpolation
 slug: Web/SVG/Attribute/color-interpolation
 l10n:
-  sourceCommit: b692821c494fd3a25dd883b6fe14998fa2621f7b
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`color-interpolation`** Attribut gibt den Farbraum für Farbverlaufs-Interpolationen, Farbanimationen und Alpha-Zusammensetzung an.
+Das Attribut **`color-interpolation`** gibt den Farbraum für Farbverlaufsinterpolationen, Farbanimationen und Alpha-Kompositionen an.
 
 > [!NOTE]
 > Für Filtereffekte steuert die Eigenschaft {{SVGAttr("color-interpolation-filters")}}, welcher Farbraum verwendet wird.
 
-Die `color-interpolation` Eigenschaft wählt, ob Farboperationen im sRGB-Farbraum oder im (lichtenergie-linearen) linearen RGB-Farbraum erfolgen. Nachdem der geeignete Farbraum ausgewählt ist, wird eine komponentenweise lineare Interpolation verwendet.
+Die Eigenschaft `color-interpolation` wählt zwischen Farboperationen im sRGB-Farbraum oder in einem (lichtenergie-linearen) linearisierten RGB-Farbraum. Nachdem der entsprechende Farbraum ausgewählt wurde, wird eine komponentenweise lineare Interpolation verwendet.
 
-Wenn ein Kindelement in einen Hintergrund eingeblendet wird, bestimmt der Wert der `color-interpolation` Eigenschaft auf dem Kindelement den Blendtyp, nicht der Wert der `color-interpolation` beim Elternelement. Für Farbverläufe, die das {{SVGAttr("href")}} oder das veraltete {{SVGAttr("xlink:href")}} Attribut verwenden, um auf einen anderen Farbverlauf zu verweisen, verwendet der Farbverlauf den Eigenschaftswert des Farbverlaufselements, das direkt durch die {{SVGAttr("fill")}} oder {{SVGAttr("stroke")}} Eigenschaft referenziert wird. Bei der Animation von Farben erfolgt die Farbinterpolation gemäß dem Wert der `color-interpolation` Eigenschaft auf dem animierten Element.
+Wenn ein Kindelement in einen Hintergrund eingeblendet wird, bestimmt der Wert der Eigenschaft `color-interpolation` auf dem Kind den Typ der Überblendung, nicht der Wert der `color-interpolation` auf dem Elternteil. Für Verläufe, die das {{SVGAttr("href")}}- oder das veraltete {{SVGAttr("xlink:href")}}-Attribut verwenden, um auf einen anderen Verlauf zu verweisen, verwendet der Verlauf den Eigenschaftswert von dem durch die {{SVGAttr("fill")}}- oder {{SVGAttr("stroke")}}-Eigenschaft direkt referenzierten Verlaufs-Element. Beim Animieren von Farben wird die Farbinterpolation gemäß dem Wert der `color-interpolation`-Eigenschaft auf dem animierten Element durchgeführt.
 
 > [!NOTE]
 > Als Präsentationsattribut kann {{CSSXref("color-interpolation")}} als CSS-Eigenschaft verwendet werden.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement("a")}}
 - {{SVGElement("animate")}}
@@ -50,7 +50,7 @@ Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 - {{SVGElement("tspan")}}
 - {{SVGElement("use")}}
 
-## Verwendungshinweise
+## Nutzungshinweise
 
 <table class="properties">
   <tbody>
@@ -70,7 +70,7 @@ Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 </table>
 
 - `auto`
-  - : Bezeichnet, dass der Benutzeragent entweder die `sRGB`- oder `linearRGB`-Farbräume für die Farbinterpolation wählen kann. Diese Option zeigt an, dass der Autor nicht verlangt, dass die Farbinterpolation in einem bestimmten Farbraum erfolgt.
+  - : Gibt an, dass der Benutzeragent entweder die Farbräume `sRGB` oder `linearRGB` für die Farbinterpolation wählen kann. Diese Option zeigt an, dass der Autor nicht erfordert, dass die Farbinterpolation in einem bestimmten Farbraum erfolgt.
 - `sRGB`
   - : Gibt an, dass die Farbinterpolation im sRGB-Farbraum erfolgen soll.
 - `linearRGB`
@@ -78,9 +78,9 @@ Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
 ## Beispiel
 
-Dieses Beispiel zeigt vier SVGs, jedes mit einem {{SVGElement("rect")}} Element und einem unterschiedlichen Farbverlauf, der als Füllung für das `<rect>` verwendet wird. Die ersten beiden SVGs verwenden {{SVGElement("linearGradient")}} und die zweiten beiden verwenden {{SVGElement("radialGradient")}} Elemente. In nicht unterstützten Browsern sieht der Verlauf gleich aus.
+Dieses Beispiel zeigt vier SVGs, jeweils mit einem {{SVGElement("rect")}}-Element und einem unterschiedlichen Verlauf, der als Füllung für das `<rect>` verwendet wird. Die ersten beiden SVGs verwenden {{SVGElement("linearGradient")}} und die zweiten beiden verwenden {{SVGElement("radialGradient")}}-Elemente. In nicht unterstützten Browsern sieht der Verlauf gleich aus.
 
-Im ersten SVG ist das `color-interpolation` Attribut nicht im `<linearGradient>` Element enthalten, es wird also `sRGB` als Standardwert verwendet.
+In diesem ersten SVG ist das `color-interpolation`-Attribut nicht im `<linearGradient>`-Element enthalten, was standardmäßig `sRGB` ist.
 
 ```css hidden
 svg {
@@ -115,7 +115,7 @@ svg {
 </svg>
 ```
 
-Im zweiten SVG ist das `color-interpolation` Attribut im `<linearGradient>` Element enthalten und auf `linearRGB` gesetzt.
+In diesem zweiten SVG ist das `color-interpolation`-Attribut im `<linearGradient>`-Element enthalten und auf `linearRGB` gesetzt.
 
 ```html
 <svg width="450" height="70">
@@ -144,7 +144,7 @@ Im zweiten SVG ist das `color-interpolation` Attribut im `<linearGradient>` Elem
 </svg>
 ```
 
-Im dritten SVG ist das `color-interpolation` Attribut nicht im `<radialGradient>` Element enthalten, es wird also `sRGB` als Standardwert verwendet.
+In diesem dritten SVG ist das `color-interpolation`-Attribut nicht im `<radialGradient>`-Element enthalten, was standardmäßig `sRGB` ist.
 
 ```html
 <svg width="450" height="70">
@@ -164,7 +164,7 @@ Im dritten SVG ist das `color-interpolation` Attribut nicht im `<radialGradient>
 </svg>
 ```
 
-Im vierten SVG ist das `color-interpolation` Attribut im `<radialGradient>` Element enthalten und auf `linearRGB` gesetzt.
+In diesem vierten SVG ist das `color-interpolation`-Attribut im `<radialGradient>`-Element enthalten und auf `linearRGB` gesetzt.
 
 ```html
 <svg width="450" height="70">
@@ -204,7 +204,7 @@ Im vierten SVG ist das `color-interpolation` Attribut im `<radialGradient>` Elem
 
 - {{SVGElement("linearGradient")}}
 - {{SVGElement("radialGradient")}}
-- {{CSSXref("color-interpolation")}}
+- CSS {{cssxref("color-interpolation")}}-Eigenschaft
 - [sRGB-Spezifikation](https://webstore.iec.ch/en/publication/6169)
 - {{SVGAttr("color-interpolation-filters")}}
 - [Computer color is broken](https://www.youtube.com/watch?v=LKnqECcg6Gw) - populäre Demonstration von linearRGB
diff --git a/files/de/web/svg/attribute/color/index.md b/files/de/web/svg/attribute/color/index.md
index ec162a13c..39322f199 100644
--- a/files/de/web/svg/attribute/color/index.md
+++ b/files/de/web/svg/attribute/color/index.md
@@ -2,19 +2,19 @@
 title: color
 slug: Web/SVG/Attribute/color
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`color`** Attribut wird verwendet, um einen potenziellen indirekten Wert, `currentcolor`, für die Attribute {{SVGAttr("fill")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("flood-color")}} und {{SVGAttr("lighting-color")}} bereitzustellen.
+Das **`color`** Attribut wird verwendet, um einen potenziellen indirekten Wert `currentcolor` für die Attribute {{SVGAttr("fill")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("flood-color")}} und {{SVGAttr("lighting-color")}} bereitzustellen.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `color` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie unter [CSS color](/de/docs/Web/CSS/color).
+> Als Präsentationsattribut kann `color` als CSS-Eigenschaft verwendet werden. Siehe [CSS color](/de/docs/Web/CSS/color) für weitere Informationen.
 
-Als Präsentationsattribut kann es auf jedes Element angewendet werden, hat jedoch, wie oben erwähnt, keine direkte Wirkung auf SVG-Elemente.
+Als Präsentationsattribut kann es auf jedes Element angewendet werden, aber wie oben erwähnt, hat es keine direkte Wirkung auf SVG-Elemente.
 
-## Verwendungshinweise
+## Anwendungsnotizen
 
 <table class="properties">
   <tbody>
@@ -27,7 +27,7 @@ Als Präsentationsattribut kann es auf jedes Element angewendet werden, hat jedo
     </tr>
     <tr>
       <th scope="row">Standardwert</th>
-      <td>Abhängig vom Benutzeragenten</td>
+      <td>Hängt vom User-Agent ab</td>
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
@@ -70,3 +70,7 @@ svg {
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("color")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/cursor/index.md b/files/de/web/svg/attribute/cursor/index.md
index 3cc6115aa..e6038f072 100644
--- a/files/de/web/svg/attribute/cursor/index.md
+++ b/files/de/web/svg/attribute/cursor/index.md
@@ -2,18 +2,18 @@
 title: cursor
 slug: Web/SVG/Attribute/cursor
 l10n:
-  sourceCommit: bea339d321513fc6d66d95c8f0305b9387fa57bb
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-[SVG-Attribut-Referenz Startseite](/de/docs/Web/SVG/Attribute)
+[SVG-Attributreferenz Startseite](/de/docs/Web/SVG/Attribute)
 
-Das `cursor`-Attribut legt den Mauszeiger fest, der angezeigt wird, wenn sich der Mauszeiger über einem Element befindet.
+Das `cursor`-Attribut legt den Mauszeiger fest, der angezeigt wird, wenn der Mauszeiger über einem Element liegt.
 
-Dieses Attribut verhält sich genau wie die CSS-Eigenschaft {{cssxref("cursor")}}, außer dass, wenn der Browser das {{ SVGElement("cursor") }}-Element unterstützt, Sie es mit der [\<FuncIRI>](/de/docs/Web/SVG/Content_type#funciri)-Notation verwenden können sollten.
+Dieses Attribut verhält sich genau wie die CSS-Eigenschaft {{cssxref("cursor")}}, außer dass, wenn der Browser das {{ SVGElement("cursor") }}-Element unterstützt, Sie in der Lage sein sollten, es mit der [\<FuncIRI>](/de/docs/Web/SVG/Content_type#funciri)-Notation zu verwenden.
 
-Als Präsentationsattribut kann es auch direkt innerhalb eines CSS-Stylesheets als Eigenschaft verwendet werden. Siehe CSS {{cssxref("cursor")}} für weitere Informationen.
+Als Präsentationsattribut kann es auch als Eigenschaft direkt in einem CSS-Stylesheet verwendet werden. Weitere Informationen finden Sie unter CSS {{cssxref("cursor")}}.
 
 ## Verwendungskontext
 
@@ -40,7 +40,7 @@ Als Präsentationsattribut kann es auch direkt innerhalb eines CSS-Stylesheets a
       <th scope="row">Normatives Dokument</th>
       <td>
         <a href="https://www.w3.org/TR/SVG11/interact.html#CursorProperty"
-          >SVG 1.1 (2. Ausgabe)</a
+          >SVG 1.1 (2nd Edition)</a
         >
       </td>
     </tr>
@@ -64,4 +64,4 @@ Die folgenden Elemente können das `cursor`-Attribut verwenden
 
 ## Siehe auch
 
-- {{cssxref("cursor")}}
+- CSS {{cssxref("cursor")}}-Eigenschaft
diff --git a/files/de/web/svg/attribute/direction/index.md b/files/de/web/svg/attribute/direction/index.md
index a363b3b9f..6439bbae8 100644
--- a/files/de/web/svg/attribute/direction/index.md
+++ b/files/de/web/svg/attribute/direction/index.md
@@ -2,21 +2,21 @@
 title: direction
 slug: Web/SVG/Attribute/direction
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`direction`**-Attribut legt die Inline-Basisrichtung eines {{SVGElement("text")}}- oder {{SVGElement("tspan")}}-Elements fest. Es definiert die Start- und Endpunkte einer Textzeile, wie sie von den Eigenschaften {{SVGAttr("text-anchor")}} und {{SVGAttr("inline-size")}} verwendet werden. Es kann auch die Richtung beeinflussen, in der Zeichen positioniert werden, wenn der Wert der {{SVGAttr("unicode-bidi")}}-Eigenschaft entweder `embed` oder `bidi-override` ist.
+Das **`direction`**-Attribut gibt die inline-basierte Richtung eines {{SVGElement("text")}}- oder {{SVGElement("tspan")}}-Elements an. Es definiert die Start- und Endpunkte einer Textzeile, wie sie von den {{SVGAttr("text-anchor")}}- und {{SVGAttr("inline-size")}}-Eigenschaften verwendet werden. Es kann auch die Richtung beeinflussen, in der Zeichen positioniert werden, wenn der Wert der {{SVGAttr("unicode-bidi")}}-Eigenschaft entweder `embed` oder `bidi-override` ist.
 
-Es gilt nur für Glyphen, die senkrecht zur Inline-Basisrichtung ausgerichtet sind. Dazu zählt der übliche Fall von horizontal ausgerichtetem lateinischem oder arabischem Text und der Fall von schmalen lateinischen oder arabischen Zeichen, die relativ zur Inline-Basisrichtung von oben nach unten um 90 Grad im Uhrzeigersinn gedreht sind.
+Es gilt nur für Glyphen, die senkrecht zur inline-basierten Richtung ausgerichtet sind, was den üblichen Fall von horizontal ausgerichtetem lateinischen oder arabischen Text und den Fall von schmalzelligen lateinischen oder arabischen Zeichen umfasst, die um 90 Grad im Uhrzeigersinn gedreht sind in Bezug auf eine von oben nach unten verlaufende inline-basierte Richtung.
 
-In vielen Fällen liefert der bidirektionale Unicode-Algorithmus automatisch das gewünschte Ergebnis, sodass dieses Attribut in diesen Fällen nicht angegeben werden muss. In anderen Fällen, wie z.B. bei der Verwendung von Sprachen, die von rechts nach links geschrieben werden, kann es ausreichen, das `direction`-Attribut dem äußersten {{SVGElement("svg")}}-Element hinzuzufügen und diese Richtung auf alle Textelemente vererben zu lassen:
+In vielen Fällen erzeugt der bidirektionale Unicode-Algorithmus automatisch das gewünschte Ergebnis, sodass dieses Attribut in diesen Fällen nicht angegeben werden muss. In anderen Fällen, wie zum Beispiel bei der Verwendung von rechts-nach-links Sprachen, kann es ausreichend sein, das `direction`-Attribut zum äußersten {{SVGElement("svg")}}-Element hinzuzufügen, und es dieser Richtung erlauben, auf alle Textelemente zu erben:
 
 > [!NOTE]
-> Als Präsentationsattribut kann `direction` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie unter CSS {{cssxref("direction")}}.
+> Als ein Präsentationsattribut kann `direction` als eine CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie unter CSS {{cssxref("direction")}}.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement("textPath")}}
 - {{SVGElement("text")}}
@@ -74,4 +74,4 @@ svg {
 
 ## Siehe auch
 
-- {{cssxref("direction")}}
+- CSS {{cssxref("direction")}}-Eigenschaft
diff --git a/files/de/web/svg/attribute/display/index.md b/files/de/web/svg/attribute/display/index.md
index 05fbd13f5..424462d12 100644
--- a/files/de/web/svg/attribute/display/index.md
+++ b/files/de/web/svg/attribute/display/index.md
@@ -2,31 +2,31 @@
 title: display
 slug: Web/SVG/Attribute/display
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`display`**-Attribut ermöglicht es Ihnen, die Darstellung von grafischen oder Container-Elementen zu steuern.
+Das **`display`** Attribut ermöglicht es Ihnen, die Darstellung von grafischen oder Containerelementen zu steuern.
 
-Ein Wert von `display="none"` zeigt an, dass das betreffende Element und seine Kinder nicht gerendert werden. Jeder andere Wert als `none` oder `inherit` zeigt an, dass das betreffende Element vom Browser gerendert wird.
+Ein Wert von `display="none"` bedeutet, dass das angegebene Element und seine Kinder nicht dargestellt werden. Jeder Wert außer `none` oder `inherit` bedeutet, dass das angegebene Element vom Browser dargestellt wird.
 
-Wenn `display` auf `none` bei einem Container-Element gesetzt wird, bewirkt dies, dass der Container und alle seine Kinder unsichtbar werden; es wirkt also auf Gruppen von Elementen als Gruppe. Das bedeutet, dass jedes Kind eines Elements mit `display="none"` niemals gerendert wird, selbst wenn das Kind einen anderen Wert für `display` als `none` hat.
+Wenn `display` auf `none` für ein Containerelement gesetzt wird, führt dies dazu, dass der Container und alle seine Kinder unsichtbar werden; es wirkt also auf Gruppen von Elementen als eine Einheit. Das bedeutet, dass ein Kind eines Elements mit `display="none"` niemals gerendert wird, selbst wenn das Kind einen anderen Wert als `none` für `display` hat.
 
-Wenn das `display`-Attribut auf `none` gesetzt ist, wird das betreffende Element nicht Teil des Rendering-Baums. Dies hat Auswirkungen auf die {{SVGElement("tspan")}}- und {{SVGElement("tref")}}-Elemente, die Ereignisverarbeitung, Berechnungen der Begrenzungsrahmen und Berechnungen von Clipping-Pfaden:
+Wenn das `display` Attribut auf `none` gesetzt ist, wird das gegebene Element nicht Teil des Rendering-Baums. Dies hat Auswirkungen auf die {{SVGElement("tspan")}} und {{SVGElement("tref")}} Elemente, die Ereignisverarbeitung, die Berechnung von Begrenzungsrahmen und die Berechnung von Clip-Pfaden:
 
-- Wenn `display` auf einem {{SVGElement("tspan")}}- oder {{SVGElement("tref")}}-Element auf `none` gesetzt ist, wird der Textstring für die Textlayout-Zwecke ignoriert.
-- Bezüglich Ereignissen: Wenn `display` auf `none` gesetzt ist, erhält das Element keine Ereignisse.
-- Die Geometrie eines [Grafikelements](/de/docs/Web/SVG/Element#graphics_elements) mit `display` auf `none` wird nicht in Berechnungen von Begrenzungsrahmen und Clipping-Pfaden eingeschlossen.
+- Wenn `display` auf einem {{SVGElement("tspan")}} oder {{SVGElement("tref")}} Element auf `none` gesetzt ist, wird der Textstring für die Textlayout-Zwecke ignoriert.
+- In Bezug auf Ereignisse erhält das Element, wenn `display` auf `none` gesetzt ist, keine Ereignisse.
+- Die Geometrie eines [Grafik-Elements](/de/docs/Web/SVG/Element#graphics_elements) mit `display` auf `none` wird nicht in die Berechnungen von Begrenzungsrahmen und Clip-Pfaden einbezogen.
 
-Das `display`-Attribut beeinflusst nur das direkte Rendering eines gegebenen Elements, verhindert jedoch nicht, dass Elemente von anderen Elementen referenziert werden. Beispielsweise verhindert das Setzen von `none` auf einem {{SVGElement("path")}}-Element, dass dieses Element direkt auf die Leinwand gerendert wird, aber das {{SVGElement("path")}}-Element kann trotzdem von einem {{SVGElement("textPath")}}-Element referenziert werden; zudem wird seine Geometrie im Text-auf-einem-Pfad-Prozess verwendet, selbst wenn das {{SVGElement("path")}} den `display`-Wert `none` hat.
+Das `display` Attribut beeinflusst nur das direkte Rendering eines gegebenen Elements, verhindert jedoch nicht, dass Elemente von anderen Elementen referenziert werden. Wenn es zum Beispiel auf `none` bei einem {{SVGElement("path")}} Element gesetzt wird, verhindert dies, dass das Element direkt auf die Leinwand gezeichnet wird, jedoch kann das {{SVGElement("path")}} Element immer noch von einem {{SVGElement("textPath")}} Element referenziert werden; zudem wird seine Geometrie in der Text-auf-einem-Pfadverarbeitung genutzt, auch wenn das {{SVGElement("path")}} einen `display` Wert von `none` hat.
 
-Dieses Attribut beeinflusst auch das direkte Rendering auf Offscreen-Leinwänden, wie es bei Masken oder Clipping-Pfaden der Fall ist. Wenn `display="none"` auf ein Kind eines {{SVGElement("mask")}} gesetzt wird, verhindert dies, dass das betreffende Kindelement als Teil der Maske gerendert wird. Ebenso wird das Setzen von `display="none"` auf ein Kind eines {{SVGElement("clipPath")}}-Elements verhindern, dass das betreffende Kindelement zum Clipping-Pfad beiträgt.
+Dieses Attribut beeinflusst auch das direkte Rendering in Offscreen-Canvases, wie es bei Masken oder Clip-Pfaden der Fall ist. Das Setzen von `display="none"` bei einem Kind eines {{SVGElement("mask")}} verhindert, dass das jeweilige Kind als Teil der Maske gerendert wird. Ebenso verhindert das Setzen von `display="none"` bei einem Kind eines {{SVGElement("clipPath")}} Elements, dass das jeweilige Kind zum Clip-Pfad beiträgt.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `display` als CSS-Eigenschaft verwendet werden. Siehe CSS {{cssxref("display")}} für weitere Informationen.
+> Als Präsentationsattribut kann `display` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS {{cssxref("display")}}.
 
-Dieses Attribut kann mit jedem SVG-Element verwendet werden.
+Sie können dieses Attribut mit jedem SVG-Element verwenden.
 
 ## Beispiel
 
@@ -58,7 +58,7 @@ svg {
 
 {{EmbedLiveSample("Example", "240", "120")}}
 
-## Nutzungshinweise
+## Verwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -77,7 +77,7 @@ svg {
   </tbody>
 </table>
 
-Für eine Beschreibung der Werte verweisen Sie bitte auf die CSS {{cssxref("display")}} Eigenschaft.
+Für eine Beschreibung der Werte lesen Sie bitte die CSS {{cssxref("display")}} Eigenschaft.
 
 ## Spezifikationen
 
@@ -89,5 +89,5 @@ Für eine Beschreibung der Werte verweisen Sie bitte auf die CSS {{cssxref("disp
 
 ## Siehe auch
 
-- {{SVGAttr("visibility")}}-Attribut
-- {{cssxref("display")}}
+- {{SVGAttr("visibility")}} Attribut
+- CSS {{cssxref("display")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/fill-opacity/index.md b/files/de/web/svg/attribute/fill-opacity/index.md
index 54645d036..4f99edc7f 100644
--- a/files/de/web/svg/attribute/fill-opacity/index.md
+++ b/files/de/web/svg/attribute/fill-opacity/index.md
@@ -2,17 +2,17 @@
 title: fill-opacity
 slug: Web/SVG/Attribute/fill-opacity
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`fill-opacity`** Attribut ist ein Präsentationsattribut, das die Opazität des Paint-Servers (_Farbe_, _Verlauf_, _Muster_ usw.) definiert, der auf eine Form angewendet wird.
+Das **`fill-opacity`**-Attribut ist ein Präsentationsattribut, das die Opazität des Farbservers (_Farbe_, _Verlauf_, _Muster_, etc.) definiert, der auf eine Form angewendet wird.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `fill-opacity` als CSS-Eigenschaft verwendet werden.
 
-Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
+Dieses Attribut können Sie mit den folgenden SVG-Elementen verwenden:
 
 - {{SVGElement('circle')}}
 - {{SVGElement('ellipse')}}
@@ -53,7 +53,7 @@ svg {
 
 {{EmbedLiveSample("Example", '100%', 150)}}
 
-## Verwendungshinweise
+## Nutzungshinweise
 
 <table class="properties">
   <tbody>
@@ -80,7 +80,7 @@ svg {
 </table>
 
 > [!NOTE]
-> SVG2 führt Prozentwerte für `fill-opacity` ein, jedoch wird dies noch nicht weitgehend unterstützt (_Siehe [Browser-Kompatibilität](#browser-kompatibilität) unten_). Daher ist es empfehlenswert, die Opazität mit einem Wert im Bereich `[0-1]` festzulegen.
+> SVG2 führt Prozentwerte für `fill-opacity` ein, diese werden jedoch noch nicht weitreichend unterstützt (_siehe [Browser-Kompatibilität](#browser-kompatibilität) unten_). Daher ist es am besten, die Opazität mit einem Wert im Bereich `[0-1]` festzulegen.
 
 ## Spezifikationen
 
@@ -92,6 +92,7 @@ svg {
 
 ## Siehe auch
 
+- CSS {{cssxref("fill-opacity")}} Eigenschaft
 - {{SVGAttr("opacity")}}
 - {{SVGAttr("stop-opacity")}}
 - {{SVGAttr("stroke-opacity")}}
diff --git a/files/de/web/svg/attribute/fill-rule/index.md b/files/de/web/svg/attribute/fill-rule/index.md
index eebf56e85..3c08f7bb7 100644
--- a/files/de/web/svg/attribute/fill-rule/index.md
+++ b/files/de/web/svg/attribute/fill-rule/index.md
@@ -2,17 +2,17 @@
 title: fill-rule
 slug: Web/SVG/Attribute/fill-rule
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`fill-rule`**-Attribut ist ein Präsentationsattribut, das den Algorithmus definiert, der verwendet wird, um den _innen_ liegenden Teil einer Form zu bestimmen.
+Das **`fill-rule`**-Attribut ist ein Präsentationsattribut, das den Algorithmus definiert, der verwendet wird, um den _inneren_ Teil einer Form zu bestimmen.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `fill-rule` als CSS-Eigenschaft verwendet werden.
 
-Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
+Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
 - {{SVGElement('path')}}
 - {{SVGElement('polygon')}}
@@ -55,7 +55,7 @@ svg {
 
 {{EmbedLiveSample("Example", '100%', 200)}}
 
-## Anwendungshinweise
+## Verwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -74,11 +74,11 @@ svg {
   </tbody>
 </table>
 
-Das `fill-rule`-Attribut bietet zwei Optionen, um zu bestimmen, wie das Innere (d. h. der zu füllende Bereich) einer Form ermittelt wird:
+Das `fill-rule`-Attribut bietet zwei Optionen, wie das Innere (d.h., der zu füllende Bereich) einer Form bestimmt wird:
 
 ### nonzero
 
-Der Wert `nonzero` bestimmt die „Innigkeit“ eines Punktes in der Form, indem von diesem Punkt aus ein Strahl in unendliche Richtung gezeichnet und die Stellen untersucht werden, an denen ein Segment der Form den Strahl kreuzt. Beginnend mit einem Zählwert von null, wird eins hinzugefügt, jedes Mal wenn ein Pfadsegment den Strahl von links nach rechts kreuzt und eins abgezogen, jedes Mal wenn ein Pfadsegment den Strahl von rechts nach links kreuzt. Nach dem Zählen der Kreuzungen, wenn das Ergebnis null ist, liegt der Punkt außerhalb des Pfades. Andernfalls liegt er innerhalb.
+Der Wert `nonzero` bestimmt das "Innersein" eines Punktes in der Form, indem ein Strahl von diesem Punkt aus in eine beliebige Richtung bis ins Unendliche gezogen wird und dann die Stellen untersucht werden, an denen ein Segment der Form den Strahl schneidet. Beginnend mit einem Zähler von Null, wird jedes Mal eins addiert, wenn ein Pfadsegment den Strahl von links nach rechts kreuzt, und jedes Mal eins subtrahiert, wenn ein Pfadsegment den Strahl von rechts nach links kreuzt. Nach dem Zählen der Kreuzungen, wenn das Ergebnis null ist, befindet sich der Punkt außerhalb des Pfades. Andernfalls liegt er innerhalb.
 
 #### Beispiel
 
@@ -126,7 +126,7 @@ svg {
 
 ### evenodd
 
-Der Wert `evenodd` bestimmt die „Innigkeit“ eines Punktes in der Form, indem von diesem Punkt aus ein Strahl in unendliche Richtung gezeichnet wird und die Anzahl der Pfadsegmente der gegebenen Form gezählt wird, die der Strahl kreuzt. Ist diese Anzahl ungerade, liegt der Punkt innerhalb; ist sie gerade, liegt der Punkt außerhalb.
+Der Wert `evenodd` bestimmt das "Innersein" eines Punktes in der Form, indem ein Strahl von diesem Punkt in eine beliebige Richtung bis ins Unendliche gezogen wird und die Anzahl der Pfadsegmente gezählt wird, die der Strahl von der gegebenen Form kreuzt. Wenn diese Zahl ungerade ist, liegt der Punkt innen; wenn gerade, liegt er außen.
 
 #### Beispiel
 
@@ -179,3 +179,7 @@ svg {
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("fill-rule")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/fill/index.md b/files/de/web/svg/attribute/fill/index.md
index eb59565b0..0296e25c9 100644
--- a/files/de/web/svg/attribute/fill/index.md
+++ b/files/de/web/svg/attribute/fill/index.md
@@ -2,14 +2,14 @@
 title: fill
 slug: Web/SVG/Attribute/fill
 l10n:
-  sourceCommit: 01b8471b84e1d157cbddbb3ffaf560a86b082070
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`fill`**-Attribut hat zwei unterschiedliche Bedeutungen. Für Formen und Text ist es ein Präsentationsattribut, das die Farbe (_oder einen SVG-Farbdienst wie Verläufe oder Muster_) definiert, welche zum Füllen des Elements verwendet wird; für Animationen definiert es den Endzustand der Animation.
+Das **`fill`** Attribut hat zwei verschiedene Bedeutungen. Für Formen und Text ist es ein Präsentationsattribut, das die Farbe (_oder jeden SVG-Malserver wie Verläufe oder Muster_) definiert, die verwendet wird, um das Element zu malen; für Animationen definiert es den Endzustand der Animation.
 
-Das SVG-Präsentationsattribut `fill` und die CSS-Eigenschaft {{cssxref("fill")}} können mit den folgenden SVG-Elementen verwendet werden:
+Das SVG Präsentationsattribut `fill` und die CSS-Eigenschaft {{cssxref("fill")}} können mit den folgenden SVG Elementen verwendet werden:
 
 - {{SVGElement('circle')}}
 - {{SVGElement('ellipse')}}
@@ -22,7 +22,7 @@ Das SVG-Präsentationsattribut `fill` und die CSS-Eigenschaft {{cssxref("fill")}
 - {{SVGElement('tref')}}
 - {{SVGElement('tspan')}}
 
-Das SVG-Attribut `fill` kann verwendet werden, um den Endzustand der Animation mit den folgenden SVG-Elementen zu definieren:
+Das SVG `fill` Attribut kann verwendet werden, um den Endzustand der Animation mit den folgenden SVG Elementen zu definieren:
 
 - {{SVGElement('animate')}}
 - {{SVGElement('animateMotion')}}
@@ -31,7 +31,7 @@ Das SVG-Attribut `fill` kann verwendet werden, um den Endzustand der Animation m
 
 ## Beispiele
 
-### Grundlegende Farb- und Verlaufsfüllungen sowie Animationen
+### Grundlegende Farb- und Verlaufsausfüllungen sowie Animation
 
 ```css hidden
 html,
@@ -72,13 +72,13 @@ svg {
 </svg>
 ```
 
-{{EmbedLiveSample("Grundlegende Farb- und Verlaufsfüllungen sowie Animationen", '100%', 200)}}
+{{EmbedLiveSample("Basic color and gradient fills, and animation", '100%', 200)}}
 
 ### `context-fill` Beispiel
 
-In diesem Beispiel definieren wir drei Formen unter Verwendung von {{SVGElement('path')}}-Elementen, die jeweils mit einer anderen [`stroke`](/de/docs/Web/SVG/Attribute/stroke) und `fill`-Farbe versehen sind. Wir definieren auch ein {{SVGElement('circle')}}-Element als Marker über das {{SVGElement('marker')}}-Element. Jede Form hat den Marker über die `marker`-CSS-Eigenschaft angewendet.
+In diesem Beispiel definieren wir drei Formen mit {{SVGElement('path')}} Elementen, jedes mit einer unterschiedlichen [`stroke`](/de/docs/Web/SVG/Attribute/stroke) und `fill` Farbe. Wir definieren auch ein {{SVGElement('circle')}} Element als Markierung über das {{SVGElement('marker')}} Element. Jede Form hat die Markierung über die CSS-Eigenschaft `marker` angewendet.
 
-Das {{SVGElement('circle')}}-Element hat `stroke="context-stroke"` und `fill="context-fill"` auf sich gesetzt. Da es als Marker im Kontext der Formen gesetzt wird, bewirken diese Attribute, dass es die `fill`- und `stroke`-Werte erbt, die auf das {{SVGElement('path')}}-Element in jedem Fall gesetzt sind.
+Das {{SVGElement('circle')}} hat `stroke="context-stroke"` und `fill="context-fill"` gesetzt. Da es im Kontext der Formen als Markierung gesetzt wird, bewirken diese Attribute, dass es die `fill` und `stroke` übernimmt, die auf das {{SVGElement('path')}} Element in jedem Fall gesetzt sind.
 
 ```html-nolint
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
@@ -102,12 +102,12 @@ Das {{SVGElement('circle')}}-Element hat `stroke="context-stroke"` und `fill="co
 </svg>
 ```
 
-Das Ergebnis ist wie folgt:
+Die Ausgabe ist wie folgt:
 
-{{EmbedLiveSample("`context-stroke` Beispiel", '100%', 220)}}
+{{EmbedLiveSample("`context-stroke` example", '100%', 220)}}
 
 > [!NOTE]
-> Elemente können auch `context-stroke` und `context-fill` verwenden, um `stroke`- und `fill`-Werte zu erben, wenn sie durch {{SVGElement('use')}}-Elemente referenziert werden.
+> Elemente können auch `context-stroke` und `context-fill` verwenden, um `stroke` und `fill` Werte zu erben, wenn sie durch {{SVGElement('use')}} Elemente referenziert werden.
 
 ## animate
 
@@ -118,9 +118,9 @@ Für {{SVGElement('animate')}} definiert `fill` den Endzustand der Animation.
     <tr>
       <th scope="row">Wert</th>
       <td>
-        <code>freeze</code> (<em>Behält den Zustand des letzten Animationsrahmens bei</em
+        <code>freeze</code> (<em>Halten Sie den Zustand des letzten Animationsrahmens</em
         >) | <code>remove</code> (<em
-          >Behält den Zustand des ersten Animationsrahmens bei</em
+          >Halten Sie den Zustand des ersten Animationsrahmens</em
         >)
       </td>
     </tr>
@@ -144,9 +144,9 @@ Für {{SVGElement('animateMotion')}} definiert `fill` den Endzustand der Animati
     <tr>
       <th scope="row">Wert</th>
       <td>
-        <code>freeze</code> (<em>Behält den Zustand des letzten Animationsrahmens bei</em
+        <code>freeze</code> (<em>Halten Sie den Zustand des letzten Animationsrahmens</em
         >) | <code>remove</code> (<em
-          >Behält den Zustand des ersten Animationsrahmens bei</em
+          >Halten Sie den Zustand des ersten Animationsrahmens</em
         >)
       </td>
     </tr>
@@ -170,9 +170,9 @@ Für {{SVGElement('animateTransform')}} definiert `fill` den Endzustand der Anim
     <tr>
       <th scope="row">Wert</th>
       <td>
-        <code>freeze</code> (<em>Behält den Zustand des letzten Animationsrahmens bei</em
+        <code>freeze</code> (<em>Halten Sie den Zustand des letzten Animationsrahmens</em
         >) | <code>remove</code> (<em
-          >Behält den Zustand des ersten Animationsrahmens bei</em
+          >Halten Sie den Zustand des ersten Animationsrahmens</em
         >)
       </td>
     </tr>
@@ -245,7 +245,7 @@ Für {{SVGElement('ellipse')}} ist `fill` ein Präsentationsattribut, das die Fa
 
 ## path
 
-Für {{SVGElement('path')}} ist `fill` ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (_Das Innere wird durch das Attribut {{SVGAttr('fill-rule')}} oder die CSS-Eigenschaft {{cssxref("fill-rule")}} definiert._)
+Für {{SVGElement('path')}} ist `fill` ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (_Das Innere wird vom {{SVGAttr('fill-rule')}} Attribut oder der {{cssxref("fill-rule")}} Eigenschaft definiert._)
 
 <table class="properties">
   <tbody>
@@ -273,7 +273,7 @@ Für {{SVGElement('path')}} ist `fill` ein Präsentationsattribut, das die Farbe
 
 ## polygon
 
-Für {{SVGElement('polygon')}} ist `fill` ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (_Das Innere wird durch das Attribut {{SVGAttr('fill-rule')}} oder die CSS-Eigenschaft {{cssxref("fill-rule")}} definiert._)
+Für {{SVGElement('polygon')}} ist `fill` ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (_Das Innere wird vom {{SVGAttr('fill-rule')}} Attribut oder der {{cssxref("fill-rule")}} Eigenschaft definiert._)
 
 <table class="properties">
   <tbody>
@@ -301,7 +301,7 @@ Für {{SVGElement('polygon')}} ist `fill` ein Präsentationsattribut, das die Fa
 
 ## polyline
 
-Für {{SVGElement('polyline')}} ist `fill` ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (_Das Innere wird durch das Attribut {{SVGAttr('fill-rule')}} oder die CSS-Eigenschaft {{cssxref("fill-rule")}} definiert._)
+Für {{SVGElement('polyline')}} ist `fill` ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (_Das Innere wird vom {{SVGAttr('fill-rule')}} Attribut oder der {{cssxref("fill-rule")}} Eigenschaft definiert._)
 
 <table class="properties">
   <tbody>
@@ -364,9 +364,9 @@ Für {{SVGElement('set')}} definiert `fill` den Endzustand der Animation.
     <tr>
       <th scope="row">Wert</th>
       <td>
-        <code>freeze</code> (<em>Behält den Zustand des letzten Animationsrahmens bei</em
+        <code>freeze</code> (<em>Halten Sie den Zustand des letzten Animationsrahmens</em
         >) | <code>remove</code> (<em
-          >Behält den Zustand des ersten Animationsrahmens bei</em
+          >Halten Sie den Zustand des ersten Animationsrahmens</em
         >)
       </td>
     </tr>
@@ -440,7 +440,7 @@ Für {{SVGElement('textPath')}} ist `fill` ein Präsentationsattribut, das die F
 ## tref
 
 > [!WARNING]
-> Ab SVG2 ist {{SVGElement('tref')}} veraltet und sollte nicht mehr verwendet werden.
+> Seit SVG2 ist {{SVGElement('tref')}} veraltet und sollte nicht verwendet werden.
 
 Für {{SVGElement('tref')}} ist `fill` ein Präsentationsattribut, das die Farbe des Textes definiert.
 
@@ -503,3 +503,7 @@ Für {{SVGElement('tspan')}} ist `fill` ein Präsentationsattribut, das die Farb
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("fill")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/filter/index.md b/files/de/web/svg/attribute/filter/index.md
index 4513d0ffb..8a0c18e28 100644
--- a/files/de/web/svg/attribute/filter/index.md
+++ b/files/de/web/svg/attribute/filter/index.md
@@ -2,17 +2,17 @@
 title: filter
 slug: Web/SVG/Attribute/filter
 l10n:
-  sourceCommit: 4030a3382d2f2ee9a2aa6232c1fbb5724a27cc8b
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`filter`** Attribut gibt die durch das {{SVGElement("filter")}}-Element definierten Filtereffekte an, die auf das jeweilige Element angewendet werden sollen.
+Das **`filter`**-Attribut gibt die Filtereffekte an, die durch das {{SVGElement("filter")}}-Element definiert werden und auf das entsprechende Element angewendet werden sollen.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `filter` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie unter CSS {{cssxref("filter")}}.
 
-Als Präsentationsattribut kann es auf jedes Element angewendet werden, hat jedoch nur Wirkung auf [Container-Elemente](/de/docs/Web/SVG/Element#container_elements) ohne das {{SVGElement("defs")}}-Element, auf alle [Grafikelemente](/de/docs/Web/SVG/Element#graphics_elements) und das {{SVGElement("use")}}-Element.
+Als Präsentationsattribut kann es auf jedes Element angewendet werden, es wirkt jedoch nur auf [Container-Elemente](/de/docs/Web/SVG/Element#container_elements) ohne das {{SVGElement("defs")}}-Element, auf alle [Grafikelemente](/de/docs/Web/SVG/Element#graphics_elements) und auf das {{SVGElement("use")}}-Element.
 
 ## Beispiel
 
@@ -36,7 +36,7 @@ svg {
 
 {{EmbedLiveSample("Example", "220", "220")}}
 
-## Nutzungshinweise
+## Anwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -46,7 +46,7 @@ svg {
         <code>none</code>
         <a
           href="/de/docs/Web/CSS/Value_definition_syntax#single_bar"
-          title="Einzelner Balken: genau eine der Einheiten muss vorhanden sein"
+          title="Single bar: exactly one of the entities must be present"
           >|</a
         >
         <code>&#x3C;filter-value-list></code>
@@ -63,7 +63,7 @@ svg {
   </tbody>
 </table>
 
-Eine Beschreibung der Werte finden Sie in der CSS-Eigenschaft {{cssxref("filter")}}.
+Eine Beschreibung der Werte finden Sie unter der CSS {{cssxref("filter")}}-Eigenschaft.
 
 ## Spezifikationen
 
@@ -76,4 +76,4 @@ Eine Beschreibung der Werte finden Sie in der CSS-Eigenschaft {{cssxref("filter"
 ## Siehe auch
 
 - {{SVGElement("filter")}}
-- {{cssxref("filter")}}
+- CSS {{cssxref("filter")}}-Eigenschaft
diff --git a/files/de/web/svg/attribute/flood-color/index.md b/files/de/web/svg/attribute/flood-color/index.md
index edc1a5734..66540ee43 100644
--- a/files/de/web/svg/attribute/flood-color/index.md
+++ b/files/de/web/svg/attribute/flood-color/index.md
@@ -2,12 +2,12 @@
 title: flood-color
 slug: Web/SVG/Attribute/flood-color
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das Attribut **`flood-color`** gibt an, welche Farbe zur Flutung der aktuellen Filter-Primitive-Subregion verwendet werden soll.
+Das **`flood-color`**-Attribut gibt an, welche Farbe verwendet werden soll, um die aktuelle Filterprimitiv-Unterregion zu überfluten.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `flood-color` als CSS-Eigenschaft verwendet werden.
@@ -48,7 +48,7 @@ svg {
 
 {{EmbedLiveSample("Example", "420", "200")}}
 
-## Nutzungshinweise
+## Anwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -57,7 +57,7 @@ svg {
       <td>{{cssxref("color")}}</td>
     </tr>
     <tr>
-      <th scope="row">Anfangswert</th>
+      <th scope="row">Initialwert</th>
       <td><code>black</code></td>
     </tr>
     <tr>
@@ -77,4 +77,5 @@ svg {
 
 ## Siehe auch
 
+- CSS {{cssxref("flood-color")}} Eigenschaft
 - {{SVGAttr("flood-opacity")}}
diff --git a/files/de/web/svg/attribute/flood-opacity/index.md b/files/de/web/svg/attribute/flood-opacity/index.md
index 68f9c9aec..76137bb02 100644
--- a/files/de/web/svg/attribute/flood-opacity/index.md
+++ b/files/de/web/svg/attribute/flood-opacity/index.md
@@ -2,17 +2,17 @@
 title: flood-opacity
 slug: Web/SVG/Attribute/flood-opacity
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`flood-opacity`** Attribut gibt den Opazitätswert an, der in der aktuellen Filterprimiv-Subregion verwendet werden soll.
+Das **`flood-opacity`**-Attribut gibt den Opazitätswert an, der über die aktuelle Filterprimitiv-Subregion verwendet werden soll.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `flood-opacity` als CSS-Eigenschaft verwendet werden.
 
-Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
+Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
 - {{SVGElement("feFlood")}} und {{SVGElement("feDropShadow")}}
 
@@ -68,7 +68,7 @@ svg {
       <td><code>&#x3C;alpha-value></code></td>
     </tr>
     <tr>
-      <th scope="row">Anfangswert</th>
+      <th scope="row">Initialwert</th>
       <td><code>1</code></td>
     </tr>
     <tr>
@@ -79,8 +79,7 @@ svg {
 </table>
 
 - `<alpha-value>`
-  - : Eine Zahl oder ein Prozentsatz, der den Opazitätswert angibt, der in der aktuellen Filterprimitive-Subregion verwendet werden soll.
-    Eine Zahl von `0` oder ein Prozentsatz von `0%` repräsentiert eine vollständig transparente Farbe, `1` oder `100%` repräsentiert eine vollständig undurchsichtige Farbe.
+  - : Eine Zahl oder ein Prozentsatz, der den Opazitätswert angibt, der über die aktuelle Filterprimitiv-Subregion verwendet werden soll. Eine Zahl von `0` oder ein Prozentsatz von `0%` stellt eine vollständig transparente Farbe dar, `1` oder `100%` stellt eine vollständig opake Farbe dar.
 
 ## Spezifikationen
 
@@ -92,4 +91,5 @@ svg {
 
 ## Siehe auch
 
+- CSS {{cssxref("flood-opacity")}}-Eigenschaft
 - {{SVGAttr("flood-color")}}
diff --git a/files/de/web/svg/attribute/font-family/index.md b/files/de/web/svg/attribute/font-family/index.md
index 2ad991bd6..e490866e0 100644
--- a/files/de/web/svg/attribute/font-family/index.md
+++ b/files/de/web/svg/attribute/font-family/index.md
@@ -2,17 +2,17 @@
 title: font-family
 slug: Web/SVG/Attribute/font-family
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`font-family`**-Attribut gibt an, welche Schriftfamilie zur Darstellung des Textes verwendet wird. Es wird als priorisierte Liste von Schriftfamiliennamen und/oder generischen Familienschriftarten angegeben.
+Das Attribut **`font-family`** gibt an, welche Schriftfamilie zur Darstellung des Textes verwendet wird. Es wird als priorisierte Liste von Schriftfamiliennamen und/oder generischen Familiennamen angegeben.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `font-family` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS-Eigenschaft {{cssxref("font-family")}}.
 
-Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
+Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
 - {{SVGElement("text")}}
 - {{SVGElement("textPath")}}
@@ -38,7 +38,7 @@ svg {
 
 {{EmbedLiveSample("Example", "200", "30")}}
 
-## Verwendungshinweise
+## Hinweise zur Verwendung
 
 <table class="properties">
   <tbody>
@@ -48,7 +48,7 @@ svg {
     </tr>
     <tr>
       <th scope="row">Standardwert</th>
-      <td>Abhängig vom Benutzeragenten</td>
+      <td>Hängt vom Benutzeragenten ab</td>
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
@@ -57,7 +57,7 @@ svg {
   </tbody>
 </table>
 
-Für eine Beschreibung der Werte lesen Sie bitte die [CSS `font-family`](/de/docs/Web/CSS/font-family#values) Eigenschaft.
+Eine Beschreibung der Werte finden Sie in der [CSS `font-family`](/de/docs/Web/CSS/font-family#values) Eigenschaft.
 
 ## Spezifikationen
 
@@ -69,4 +69,4 @@ Für eine Beschreibung der Werte lesen Sie bitte die [CSS `font-family`](/de/doc
 
 ## Siehe auch
 
-- {{cssxref("font-family")}}
+- CSS {{cssxref("font-family")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/font-size-adjust/index.md b/files/de/web/svg/attribute/font-size-adjust/index.md
index 6e3973ea3..f24e26da6 100644
--- a/files/de/web/svg/attribute/font-size-adjust/index.md
+++ b/files/de/web/svg/attribute/font-size-adjust/index.md
@@ -2,12 +2,12 @@
 title: font-size-adjust
 slug: Web/SVG/Attribute/font-size-adjust
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das Attribut `font-size-adjust` ermöglicht es Autoren, einen Aspektwert für ein Element anzugeben, der die x-Höhe der bevorzugten Schriftart in einer Ersatzschriftart beibehält.
+Das Attribut `font-size-adjust` ermöglicht es Autoren, einen Aspektwert für ein Element anzugeben, der die x-Höhe der bevorzugten Schriftart in einer Ersatzschriftart bewahrt.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `font-size-adjust` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS-Eigenschaft {{cssxref("font-size-adjust")}}.
@@ -55,7 +55,7 @@ svg {
 
 {{EmbedLiveSample("Example", "600", "100")}}
 
-## Nutzungshinweise
+## Verwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -78,11 +78,11 @@ svg {
   - : Wählen Sie die Größe der Schriftart nur basierend auf der {{ Cssxref("font-size") }} Eigenschaft.
 - {{cssxref("&lt;number&gt;")}}
 
-  - : Wählen Sie die Größe der Schriftart so, dass ihre Kleinbuchstaben (bestimmt durch die x-Höhe der Schriftart) die angegebene Zahl multipliziert mit der {{ Cssxref("font-size") }} sind.
+  - : Wählen Sie die Größe der Schriftart so, dass ihre Kleinbuchstaben (bestimmt durch die x-Höhe der Schriftart) die angegebene Zahl mal die {{ Cssxref("font-size") }} sind.
 
-    Die angegebene Zahl sollte im Allgemeinen das {{Glossary("aspect_ratio", "Seitenverhältnis")}} (Verhältnis der x-Höhe zur Schriftgröße) der bevorzugten {{ Cssxref("font-family") }} sein. Dies bedeutet, dass die erstgewählte Schriftart, wenn sie verfügbar ist, in Browsern unabhängig davon, ob sie `font-size-adjust` unterstützen, dieselbe Größe hat.
+    Die angegebene Zahl sollte im Allgemeinen das {{Glossary("aspect_ratio", "Seitenverhältnis")}} (Verhältnis von x-Höhe zur Schriftgröße) der bevorzugten {{ Cssxref("font-family") }} sein. Dies bedeutet, dass die bevorzugte Schriftart, wenn verfügbar, in Browsern gleich groß erscheint, unabhängig davon, ob sie `font-size-adjust` unterstützen oder nicht.
 
-    `0` ergibt Text ohne Höhe (versteckter Text).
+    `0` ergibt Text mit null Höhe (versteckter Text).
 
 ## Spezifikationen
 
@@ -94,4 +94,4 @@ svg {
 
 ## Siehe auch
 
-- {{cssxref("font-size-adjust")}}
+- CSS {{cssxref("font-size-adjust")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/font-size/index.md b/files/de/web/svg/attribute/font-size/index.md
index ac646f06b..c206c84a1 100644
--- a/files/de/web/svg/attribute/font-size/index.md
+++ b/files/de/web/svg/attribute/font-size/index.md
@@ -2,15 +2,15 @@
 title: font-size
 slug: Web/SVG/Attribute/font-size
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`font-size`** Attribut bezieht sich auf die Größe der Schrift von der {{Glossary("baseline/typography", "Grundlinie")}} zur Grundlinie, wenn mehrere Textzeilen in einem mehrzeiligen Layout-Umfeld gesetzt werden.
+Das **`font-size`** Attribut bezieht sich auf die Größe der Schrift von der {{Glossary("baseline/typography", "Grundlinie")}} zur Grundlinie, wenn mehrere Textzeilen in einem mehrzeiligen Layoutumfeld kompakt gesetzt werden.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `font-size` als CSS-Eigenschaft verwendet werden. Siehe die CSS {{cssxref("font-size")}} Eigenschaft für weitere Informationen.
+> Als Präsentationsattribut kann `font-size` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS-Eigenschaft {{cssxref("font-size")}}.
 
 Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
@@ -38,7 +38,7 @@ svg {
 
 {{EmbedLiveSample("Example", "200", "30")}}
 
-## Verwendungshinweise
+## Hinweise zur Nutzung
 
 <table class="properties">
   <tbody>
@@ -60,7 +60,7 @@ svg {
   </tbody>
 </table>
 
-Für eine Beschreibung der Werte, siehe die [CSS `font-size`](/de/docs/Web/CSS/font-size#values) Eigenschaft.
+Für eine Beschreibung der Werte, siehe bitte die [CSS `font-size`](/de/docs/Web/CSS/font-size#values) Eigenschaft.
 
 ## Spezifikationen
 
@@ -72,4 +72,4 @@ Für eine Beschreibung der Werte, siehe die [CSS `font-size`](/de/docs/Web/CSS/f
 
 ## Siehe auch
 
-- {{cssxref("font-size")}}
+- CSS {{cssxref("font-size")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/font-stretch/index.md b/files/de/web/svg/attribute/font-stretch/index.md
index 126520b17..a72eff785 100644
--- a/files/de/web/svg/attribute/font-stretch/index.md
+++ b/files/de/web/svg/attribute/font-stretch/index.md
@@ -2,15 +2,15 @@
 title: font-stretch
 slug: Web/SVG/Attribute/font-stretch
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`font-stretch`** Attribut gibt den gewünschten Grad der Stauchung oder Dehnung der Glyphen an, die zum Rendern des Textes verwendet werden.
+Das Attribut **`font-stretch`** gibt an, in welchem Maße die Glyphen, die zum Rendern des Textes verwendet werden, komprimiert oder erweitert werden sollen.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `font-stretch` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS-Eigenschaft {{cssxref("font-stretch")}}.
+> Als Präsentationsattribut kann `font-stretch` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS {{cssxref("font-stretch")}} Eigenschaft.
 
 Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
@@ -48,4 +48,4 @@ Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
 ## Siehe auch
 
-- {{cssxref("font-stretch")}}
+- CSS {{cssxref("font-stretch")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/font-style/index.md b/files/de/web/svg/attribute/font-style/index.md
index 7c17490cf..4e63bae51 100644
--- a/files/de/web/svg/attribute/font-style/index.md
+++ b/files/de/web/svg/attribute/font-style/index.md
@@ -2,15 +2,15 @@
 title: font-style
 slug: Web/SVG/Attribute/font-style
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`font-style`**-Attribut gibt an, ob der Text mit einer normalen, kursiven oder schrägen Schrift dargestellt werden soll.
+Das **`font-style`** Attribut gibt an, ob der Text in normaler, kursiver oder schräger Schriftart dargestellt werden soll.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `font-style` auch als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS {{cssxref("font-style")}}-Eigenschaft.
+> Als Präsentationsattribut kann `font-style` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS-Eigenschaft {{cssxref("font-style")}}.
 
 Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
@@ -57,7 +57,7 @@ svg {
   </tbody>
 </table>
 
-Für eine Beschreibung der Werte lesen Sie bitte die [CSS `font-style`](/de/docs/Web/CSS/font-style#values)-Eigenschaft.
+Für eine Beschreibung der Werte verweisen wir auf die [CSS `font-style`](/de/docs/Web/CSS/font-style#values) Eigenschaft.
 
 ## Spezifikationen
 
@@ -69,4 +69,4 @@ Für eine Beschreibung der Werte lesen Sie bitte die [CSS `font-style`](/de/docs
 
 ## Siehe auch
 
-- {{cssxref("font-style")}}
+- CSS {{cssxref("font-style")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/font-variant/index.md b/files/de/web/svg/attribute/font-variant/index.md
index a776ffdfd..ee4d503ef 100644
--- a/files/de/web/svg/attribute/font-variant/index.md
+++ b/files/de/web/svg/attribute/font-variant/index.md
@@ -2,12 +2,12 @@
 title: font-variant
 slug: Web/SVG/Attribute/font-variant
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`font-variant`** Attribut gibt an, ob der Text mit Variationen der {{Glossary("glyph", "Glyphen")}} der Schriftart gerendert werden soll.
+Das **`font-variant`** Attribut gibt an, ob der Text unter Verwendung von Variationen der {{Glossary("glyph", "Glyphen")}} der Schriftart gerendert werden soll.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `font-variant` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS-Eigenschaft {{cssxref("font-variant")}}.
@@ -38,7 +38,7 @@ svg {
 
 {{EmbedLiveSample("Example", "250", "30")}}
 
-## Nutzungshinweise
+## Verwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -81,7 +81,7 @@ svg {
   </tbody>
 </table>
 
-Eine Beschreibung der Werte finden Sie in der [CSS `font-variant`](/de/docs/Web/CSS/font-variant#values) Eigenschaft.
+Für eine Beschreibung der Werte siehe die [CSS `font-variant`](/de/docs/Web/CSS/font-variant#values) Eigenschaft.
 
 ## Spezifikationen
 
@@ -93,4 +93,4 @@ Eine Beschreibung der Werte finden Sie in der [CSS `font-variant`](/de/docs/Web/
 
 ## Siehe auch
 
-- {{cssxref("font-variant")}}
+- CSS {{cssxref("font-variant")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/font-weight/index.md b/files/de/web/svg/attribute/font-weight/index.md
index 3472ea7f3..cd5feab6b 100644
--- a/files/de/web/svg/attribute/font-weight/index.md
+++ b/files/de/web/svg/attribute/font-weight/index.md
@@ -2,17 +2,17 @@
 title: font-weight
 slug: Web/SVG/Attribute/font-weight
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`font-weight`** Attribut bezieht sich auf die Fett- oder Leichtheit der Glyphen, die zum Rendern des Textes verwendet werden, relativ zu anderen Schriften in derselben Schriftfamilie.
+Das **`font-weight`** Attribut bezieht sich auf die Fettschrift oder Leichtigkeit der Glyphen, die zum Rendern des Textes verwendet werden, relativ zu anderen Schriften in derselben Schriftfamilie.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `font-weight` als CSS-Eigenschaft verwendet werden. Siehe die CSS-Eigenschaft {{cssxref("font-weight")}} für weitere Informationen.
+> Als Präsentationsattribut kann `font-weight` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS {{cssxref("font-weight")}} Eigenschaft.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement("text")}}
 - {{SVGElement("textPath")}}
@@ -38,7 +38,7 @@ svg {
 
 {{EmbedLiveSample("Example", "200", "30")}}
 
-## Verwendungshinweise
+## Verwendungsnotizen
 
 <table class="properties">
   <tbody>
@@ -60,7 +60,7 @@ svg {
   </tbody>
 </table>
 
-Für eine Beschreibung der Werte, bitte beziehen Sie sich auf die [CSS `font-weight`](/de/docs/Web/CSS/font-weight#values) Eigenschaft.
+Eine Beschreibung der Werte finden Sie in der [CSS `font-weight`](/de/docs/Web/CSS/font-weight#values) Eigenschaft.
 
 ## Spezifikationen
 
@@ -72,4 +72,4 @@ Für eine Beschreibung der Werte, bitte beziehen Sie sich auf die [CSS `font-wei
 
 ## Siehe auch
 
-- {{cssxref("font-weight")}}
+- CSS {{cssxref("font-weight")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/height/index.md b/files/de/web/svg/attribute/height/index.md
index f7a15d01c..bcd19d0b2 100644
--- a/files/de/web/svg/attribute/height/index.md
+++ b/files/de/web/svg/attribute/height/index.md
@@ -2,12 +2,12 @@
 title: height
 slug: Web/SVG/Attribute/height
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`height`**-Attribut definiert die vertikale Länge eines Elements im Benutzerkoordinatensystem.
+Das **`height`** Attribut definiert die vertikale Länge eines Elements im Benutzerkoordinatensystem.
 
 Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
@@ -60,7 +60,7 @@ svg {
 
 ## feBlend
 
-Für {{SVGElement('feBlend')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feBlend')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -84,14 +84,14 @@ Für {{SVGElement('feBlend')}} definiert `height` die vertikale Länge des Rende
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feColorMatrix
 
-Für {{SVGElement('feColorMatrix')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feColorMatrix')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -115,14 +115,14 @@ Für {{SVGElement('feColorMatrix')}} definiert `height` die vertikale Länge des
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feComponentTransfer
 
-Für {{SVGElement('feComponentTransfer')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feComponentTransfer')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -146,14 +146,14 @@ Für {{SVGElement('feComponentTransfer')}} definiert `height` die vertikale Län
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feComposite
 
-Für {{SVGElement('feComposite')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feComposite')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -177,14 +177,14 @@ Für {{SVGElement('feComposite')}} definiert `height` die vertikale Länge des R
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feConvolveMatrix
 
-Für {{SVGElement('feConvolveMatrix')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feConvolveMatrix')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -208,14 +208,14 @@ Für {{SVGElement('feConvolveMatrix')}} definiert `height` die vertikale Länge
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feDiffuseLighting
 
-Für {{SVGElement('feDiffuseLighting')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feDiffuseLighting')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -239,14 +239,14 @@ Für {{SVGElement('feDiffuseLighting')}} definiert `height` die vertikale Länge
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feDisplacementMap
 
-Für {{SVGElement('feDisplacementMap')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feDisplacementMap')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -270,14 +270,14 @@ Für {{SVGElement('feDisplacementMap')}} definiert `height` die vertikale Länge
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feDropShadow
 
-Für {{SVGElement('feDropShadow')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feDropShadow')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -301,14 +301,14 @@ Für {{SVGElement('feDropShadow')}} definiert `height` die vertikale Länge des
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feFlood
 
-Für {{SVGElement('feFlood')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feFlood')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -332,14 +332,14 @@ Für {{SVGElement('feFlood')}} definiert `height` die vertikale Länge des Rende
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feGaussianBlur
 
-Für {{SVGElement('feGaussianBlur')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feGaussianBlur')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -363,14 +363,14 @@ Für {{SVGElement('feGaussianBlur')}} definiert `height` die vertikale Länge de
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feImage
 
-Für {{SVGElement('feImage')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feImage')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -394,14 +394,14 @@ Für {{SVGElement('feImage')}} definiert `height` die vertikale Länge des Rende
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feMerge
 
-Für {{SVGElement('feMerge')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feMerge')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -425,14 +425,14 @@ Für {{SVGElement('feMerge')}} definiert `height` die vertikale Länge des Rende
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feMorphology
 
-Für {{SVGElement('feMorphology')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feMorphology')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -456,14 +456,14 @@ Für {{SVGElement('feMorphology')}} definiert `height` die vertikale Länge des
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feOffset
 
-Für {{SVGElement('feOffset')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feOffset')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -487,14 +487,14 @@ Für {{SVGElement('feOffset')}} definiert `height` die vertikale Länge des Rend
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feSpecularLighting
 
-Für {{SVGElement('feSpecularLighting')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feSpecularLighting')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -518,14 +518,14 @@ Für {{SVGElement('feSpecularLighting')}} definiert `height` die vertikale Läng
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feTile
 
-Für {{SVGElement('feTile')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feTile')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -549,14 +549,14 @@ Für {{SVGElement('feTile')}} definiert `height` die vertikale Länge des Render
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## feTurbulence
 
-Für {{SVGElement('feTurbulence')}} definiert `height` die vertikale Länge des Renderbereichs der Primitiven.
+Für {{SVGElement('feTurbulence')}} definiert `height` die vertikale Länge des Renderbereichs der primitiven Form.
 
 <table class="properties">
   <tbody>
@@ -580,7 +580,7 @@ Für {{SVGElement('feTurbulence')}} definiert `height` die vertikale Länge des
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
@@ -611,7 +611,7 @@ Für {{SVGElement('filter')}} definiert `height` die vertikale Länge des Render
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
@@ -643,7 +643,7 @@ Für {{SVGElement('foreignObject')}} definiert `height` die vertikale Länge des
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
@@ -678,7 +678,7 @@ Für {{SVGElement('image')}} definiert `height` die vertikale Länge des Bildes.
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
@@ -688,7 +688,7 @@ Für {{SVGElement('image')}} definiert `height` die vertikale Länge des Bildes.
 
 ## mask
 
-Für {{SVGElement('mask')}} definiert `height` die vertikale Länge seines Wirkungsbereichs. Die genaue Wirkung dieses Attributs wird durch das {{SVGAttr('maskUnits')}}-Attribut beeinflusst.
+Für {{SVGElement('mask')}} definiert `height` die vertikale Länge seines Wirkungsbereichs. Die genaue Wirkung dieses Attributs wird durch das {{SVGAttr('maskUnits')}} Attribut beeinflusst.
 
 <table class="properties">
   <tbody>
@@ -712,14 +712,14 @@ Für {{SVGElement('mask')}} definiert `height` die vertikale Länge seines Wirku
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ## pattern
 
-Für {{SVGElement('pattern')}} definiert `height` die vertikale Länge des Kachelmusters. Die genaue Wirkung dieses Attributs wird durch die Attribute {{SVGAttr('patternUnits')}} und {{SVGAttr('patternTransform')}} beeinflusst.
+Für {{SVGElement('pattern')}} definiert `height` die vertikale Länge des Kachelmusters. Die genaue Wirkung dieses Attributs wird durch die {{SVGAttr('patternUnits')}} und {{SVGAttr('patternTransform')}} Attribute beeinflusst.
 
 <table class="properties">
   <tbody>
@@ -737,7 +737,7 @@ Für {{SVGElement('pattern')}} definiert `height` die vertikale Länge des Kache
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
@@ -769,7 +769,7 @@ Für {{SVGElement('rect')}} definiert `height` die vertikale Länge des Rechteck
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
@@ -779,10 +779,10 @@ Für {{SVGElement('rect')}} definiert `height` die vertikale Länge des Rechteck
 
 ## svg
 
-Für {{SVGElement('svg')}} definiert `height` die vertikale Länge des Renderbereichs des SVG-Ansichtsfensters.
+Für {{SVGElement('svg')}} definiert `height` die vertikale Länge des Renderbereichs des SVG-Viewports.
 
 > [!NOTE]
-> In einem HTML-Dokument, wenn sowohl die Attribute {{SVGAttr('viewBox')}} als auch `height` fehlen, [wird das svg-Element mit einer Höhe von `150px` gerendert](https://svgwg.org/specs/integration/#svg-css-sizing)
+> In einem HTML-Dokument, wenn sowohl das {{SVGAttr('viewBox')}}-Attribut als auch das `height`-Attribut weggelassen werden, [wird das svg-Element mit einer Höhe von `150px` gerendert](https://svgwg.org/specs/integration/#svg-css-sizing)
 
 <table class="properties">
   <tbody>
@@ -807,7 +807,7 @@ Für {{SVGElement('svg')}} definiert `height` die vertikale Länge des Renderber
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
@@ -842,12 +842,12 @@ Für {{SVGElement('use')}} definiert `height` die vertikale Länge des referenzi
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
-> **Hinweis:** `height` hat keine Wirkung auf `use`-Elemente, es sei denn, das referenzierte Element hat eine [viewBox](/de/docs/Web/SVG/Attribute/viewBox) - das heißt, sie haben nur eine Auswirkung, wenn `use` sich auf ein `svg`- oder `symbol`-Element bezieht.
+> **Hinweis:** `height` hat keine Auswirkung auf `use`-Elemente, es sei denn, das referenzierte Element hat eine [viewBox](/de/docs/Web/SVG/Attribute/viewBox) - das heißt, sie haben nur eine Wirkung, wenn `use` sich auf ein `svg` oder `symbol` Element bezieht.
 
 > [!NOTE]
 > Ab SVG2 ist `height` eine _Geometrie-Eigenschaft_, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für verwendete Elemente verwendet werden kann.
@@ -855,3 +855,7 @@ Für {{SVGElement('use')}} definiert `height` die vertikale Länge des referenzi
 ## Spezifikationen
 
 {{Specifications}}
+
+## Siehe auch
+
+- CSS {{cssxref("height")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/image-rendering/index.md b/files/de/web/svg/attribute/image-rendering/index.md
index cb053e8db..f9872ece9 100644
--- a/files/de/web/svg/attribute/image-rendering/index.md
+++ b/files/de/web/svg/attribute/image-rendering/index.md
@@ -2,23 +2,23 @@
 title: image-rendering
 slug: Web/SVG/Attribute/image-rendering
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`image-rendering`**-Attribut gibt dem Browser einen Hinweis darauf, wie er Kompromisse zwischen Geschwindigkeit und Qualität beim Bildverarbeitungsprozess machen soll.
+Das **`image-rendering`**-Attribut gibt dem Browser einen Hinweis darauf, wie er bei der Bildverarbeitung zwischen Geschwindigkeit und Qualität abwägen soll.
 
-Das Resampling wird immer in einem Truecolor-Farbraum (z. B. 24-Bit) durchgeführt, auch wenn die Originaldaten und/oder das Zielgerät indizierte Farben verwenden.
+Das Resampling erfolgt immer in einem Truecolor- (z. B. 24-Bit) Farbraum, auch wenn die Originaldaten und/oder das Zielgerät indizierte Farben verwenden.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `image-rendering` als CSS-Eigenschaft verwendet werden. Siehe die CSS-Eigenschaft {{cssxref("image-rendering")}} für weitere Informationen.
+> Als Präsentationsattribut kann `image-rendering` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS-{{cssxref("image-rendering")}}-Eigenschaft.
 
 Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
 - {{SVGElement("image")}}
 
-## Verwendungshinweise
+## Nutzungshinweise
 
 <table class="properties">
   <tbody>
@@ -41,7 +41,7 @@ Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 </table>
 
 - `auto`
-  - : Gibt an, dass der Benutzeragent geeignete Kompromisse machen soll, um Geschwindigkeit und Qualität auszubalancieren, wobei der Qualität mehr Bedeutung beigemessen werden soll als der Geschwindigkeit.
+  - : Gibt an, dass der Benutzeragent angemessene Kompromisse zur Balance zwischen Geschwindigkeit und Qualität machen soll, wobei der Qualität mehr Bedeutung beigemessen wird als der Geschwindigkeit.
 - `optimizeSpeed`
   - : Gibt an, dass der Benutzeragent die Rendering-Geschwindigkeit über die Qualität stellen soll.
 - `optimizeQuality`
@@ -57,4 +57,4 @@ Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
 ## Siehe auch
 
-- {{cssxref("image-rendering")}}
+- CSS-{{cssxref("image-rendering")}}-Eigenschaft
diff --git a/files/de/web/svg/attribute/letter-spacing/index.md b/files/de/web/svg/attribute/letter-spacing/index.md
index e30fee8b7..0b32c6b0b 100644
--- a/files/de/web/svg/attribute/letter-spacing/index.md
+++ b/files/de/web/svg/attribute/letter-spacing/index.md
@@ -2,19 +2,19 @@
 title: letter-spacing
 slug: Web/SVG/Attribute/letter-spacing
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
 Das Attribut **`letter-spacing`** steuert den Abstand zwischen Textzeichen.
 
-Wenn der Attributwert eine zahl ohne Einheit ist (wie `128`), verarbeitet der Browser sie als {{cssxref("length")}} im aktuellen Koordinatensystem des Benutzers.
+Wenn der Attributwert eine einheitenlose Zahl ist (wie `128`), verarbeitet der Browser sie als {{cssxref("length")}} im aktuellen Benutzerkoordinatensystem.
 
-Wenn der Attributwert einen Einheitenindikator hat, wie `.25em` oder `1%`, konvertiert der Browser das \<length> in seinen entsprechenden Wert im aktuellen Koordinatensystem des Benutzers.
+Wenn der Attributwert eine Einheitenbezeichnung hat, wie `.25em` oder `1%`, wandelt der Browser die \<length> in den entsprechenden Wert im aktuellen Benutzerkoordinatensystem um.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `letter-spacing` als CSS-Eigenschaft verwendet werden. Siehe die CSS-Eigenschaft {{cssxref("letter-spacing")}} für weitere Informationen.
+> Als Präsentationsattribut kann `letter-spacing` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie bei der CSS {{cssxref("letter-spacing")}}-Eigenschaft.
 
 Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
@@ -42,7 +42,7 @@ svg {
 
 {{EmbedLiveSample("Example", "200", "30")}}
 
-## Anwendungshinweise
+## Verwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -61,7 +61,7 @@ svg {
   </tbody>
 </table>
 
-Für eine Beschreibung der Werte verweisen wir auf die [CSS `letter-spacing`](/de/docs/Web/CSS/letter-spacing#values) Eigenschaft.
+Für eine Beschreibung der Werte siehe die [CSS `letter-spacing`](/de/docs/Web/CSS/letter-spacing#values) Eigenschaft.
 
 ## Spezifikationen
 
@@ -73,4 +73,4 @@ Für eine Beschreibung der Werte verweisen wir auf die [CSS `letter-spacing`](/d
 
 ## Siehe auch
 
-- {{cssxref("letter-spacing")}}
+- CSS {{cssxref("letter-spacing")}}-Eigenschaft
diff --git a/files/de/web/svg/attribute/lighting-color/index.md b/files/de/web/svg/attribute/lighting-color/index.md
index 8747296f5..9884b2af4 100644
--- a/files/de/web/svg/attribute/lighting-color/index.md
+++ b/files/de/web/svg/attribute/lighting-color/index.md
@@ -2,12 +2,12 @@
 title: lighting-color
 slug: Web/SVG/Attribute/lighting-color
 l10n:
-  sourceCommit: cd840e78b6027a391fe1f11b745564cf3ebfb8e7
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das Attribut **`lighting-color`** definiert die Farbe der Lichtquelle für Lichtfilter-Primitiven.
+Das **`lighting-color`** Attribut definiert die Farbe der Lichtquelle für Lichtfilter-Primitiven.
 
 Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
@@ -52,7 +52,7 @@ svg {
 </svg>
 ```
 
-{{EmbedLiveSample("Beispiel", "420", "200")}}
+{{EmbedLiveSample("Example", "420", "200")}}
 
 ## Verwendungshinweise
 
@@ -83,4 +83,5 @@ svg {
 
 ## Siehe auch
 
-- [Beschreibung des Phong-Reflektionsmodells auf Wikipedia](https://en.wikipedia.org/wiki/Phong_reflection_model)
+- CSS {{cssxref("lighting-color")}} Eigenschaft
+- [Beschreibung des Phong-Reflection-Modells auf Wikipedia](https://en.wikipedia.org/wiki/Phong_reflection_model)
diff --git a/files/de/web/svg/attribute/mask/index.md b/files/de/web/svg/attribute/mask/index.md
index 2b6c2c812..21a9cfbca 100644
--- a/files/de/web/svg/attribute/mask/index.md
+++ b/files/de/web/svg/attribute/mask/index.md
@@ -2,12 +2,12 @@
 title: mask
 slug: Web/SVG/Attribute/mask
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`mask`**-Attribut ist ein Präsentationsattribut, das hauptsächlich verwendet wird, um ein gegebenes {{ SVGElement("mask") }}-Element mit dem Element zu verbinden, zu dem das Attribut gehört.
+Das **`mask`**-Attribut ist ein Präsentationsattribut, das hauptsächlich dazu verwendet wird, ein gegebenes {{ SVGElement("mask") }}-Element mit dem Element zu verknüpfen, zu dem das Attribut gehört.
 
 > [!NOTE]
 > Als Präsentationsattribut kann {{cssxref('mask')}} auch als CSS-Eigenschaft verwendet werden.
@@ -64,9 +64,9 @@ svg {
 
 {{EmbedLiveSample("Example", '100%', 150)}}
 
-Seit SVG2 ist das {{cssxref('mask')}}-Attribut als CSS-Eigenschaft definiert und eine Abkürzung für viele andere Eigenschaften: {{cssxref('mask-image')}}, {{cssxref('mask-mode')}}, {{cssxref('mask-repeat')}}, {{cssxref('mask-position')}}, {{cssxref('mask-clip')}}, {{cssxref('mask-origin')}}, {{cssxref('mask-size')}}, und {{cssxref('mask-composite')}}.
+Seit SVG2 ist das {{cssxref('mask')}}-Attribut als CSS-Eigenschaft definiert und eine Kurzform für viele andere Eigenschaften: {{cssxref('mask-image')}}, {{cssxref('mask-mode')}}, {{cssxref('mask-repeat')}}, {{cssxref('mask-position')}}, {{cssxref('mask-clip')}}, {{cssxref('mask-origin')}}, {{cssxref('mask-size')}}, und {{cssxref('mask-composite')}}.
 
-## Anwendungshinweise
+## Nutzungshinweise
 
 <table class="properties">
   <tbody>
@@ -92,3 +92,7 @@ Seit SVG2 ist das {{cssxref('mask')}}-Attribut als CSS-Eigenschaft definiert und
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS-{{cssxref("mask")}}-Eigenschaft
diff --git a/files/de/web/svg/attribute/opacity/index.md b/files/de/web/svg/attribute/opacity/index.md
index 2585d390a..52436173d 100644
--- a/files/de/web/svg/attribute/opacity/index.md
+++ b/files/de/web/svg/attribute/opacity/index.md
@@ -2,17 +2,17 @@
 title: opacity
 slug: Web/SVG/Attribute/opacity
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`opacity`**-Attribut spezifiziert die Transparenz eines Objekts oder einer Gruppe von Objekten, das heißt, in welchem Maße der Hintergrund hinter dem Element überlagert wird.
+Das **`opacity`**-Attribut gibt die Transparenz eines Objekts oder einer Gruppe von Objekten an, also das Maß, in dem der Hintergrund hinter dem Element überlagert wird.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `opacity` als CSS-Eigenschaft verwendet werden. Siehe die CSS {{cssxref("opacity")}} Eigenschaft für weitere Informationen.
+> Als Präsentationsattribut kann `opacity` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS-{{cssxref("opacity")}}-Eigenschaft.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement("a")}}
 - {{SVGElement("circle")}}
@@ -34,7 +34,7 @@ Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 - {{SVGElement("tspan")}}
 - {{SVGElement("use")}}
 
-Im Gegensatz zu {{SVGAttr("fill-opacity")}}, {{SVGAttr("stroke-opacity")}}, und {{SVGAttr("stop-opacity")}}, die auf einzelne Operationen angewendet werden und _während_ der Darstellung des Elements gerendert werden, wird `opacity` auf ganze Objekte oder Gruppen angewendet und verhält sich mehr wie ein Nachbearbeitungsschritt auf dem gerenderten Bild des Objekts oder der Gruppe. Daher werden, wenn Sie sowohl `opacity` als auch andere Transparenzattribute im selben Bereich haben, diese übereinandergelegt und bewirken, dass die Transparenz multipliziert wird.
+Im Gegensatz zu {{SVGAttr("fill-opacity")}}, {{SVGAttr("stroke-opacity")}} und {{SVGAttr("stop-opacity")}}, die auf einzelne Operationen angewendet werden und _wenn_ das Element gerendert wird, dargestellt werden, wird `opacity` auf ganze Objekte oder Gruppen angewendet und ähnelt eher einer Nachbearbeitung auf dem gerenderten Bild des Objekts oder der Gruppe. Daher, wenn Sie sowohl `opacity` als auch die anderen Opazitätseigenschaften im selben Bereich haben, werden sie übereinandergelegt und führen dazu, dass die Opazität multipliziert wird.
 
 ## Beispiel
 
@@ -62,7 +62,7 @@ svg {
 
 {{EmbedLiveSample("Example", "200", "200")}}
 
-## Nutzungshinweise
+## Verwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -82,7 +82,7 @@ svg {
 </table>
 
 - `<alpha-value>`
-  - : Die einheitliche Einstellung der Transparenz, die auf ein gesamtes Objekt angewendet wird, als {{cssxref("number")}}. Jegliche Werte außerhalb des Bereichs von 0.0 (vollständig transparent) bis 1.0 (vollständig undurchsichtig) werden auf diesen Bereich beschränkt.
+  - : Die einheitliche Opazitätseinstellung, die auf ein ganzes Objekt angewendet werden soll, als {{cssxref("number")}}. Alle Werte außerhalb des Bereichs von 0.0 (vollständig transparent) bis 1.0 (vollständig opak) werden in diesen Bereich geklammert.
 
 ## Spezifikationen
 
@@ -94,7 +94,7 @@ svg {
 
 ## Siehe auch
 
-- {{cssxref("opacity")}}
+- CSS {{cssxref("opacity")}}-Eigenschaft
 - {{SVGAttr("fill-opacity")}}
 - {{SVGAttr("stop-opacity")}}
 - {{SVGAttr("stroke-opacity")}}
diff --git a/files/de/web/svg/attribute/overflow/index.md b/files/de/web/svg/attribute/overflow/index.md
index bb9803b75..28399d250 100644
--- a/files/de/web/svg/attribute/overflow/index.md
+++ b/files/de/web/svg/attribute/overflow/index.md
@@ -2,27 +2,27 @@
 title: overflow
 slug: Web/SVG/Attribute/overflow
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`overflow`**-Attribut legt fest, was zu tun ist, wenn der Inhalt eines Elements zu groß ist, um in seinen Blockformatierungskontext zu passen. **Diese Funktion ist noch nicht weit verbreitet implementiert**.
+Das **`overflow`**-Attribut legt fest, was zu tun ist, wenn der Inhalt eines Elements zu groß ist, um in seinen Blockformatierungskontext zu passen. **Diese Funktion ist noch nicht weit verbreitet implementiert.**
 
-Dieses Attribut hat dieselben Parameterwerte und Bedeutungen wie die CSS-{{cssxref("overflow")}}-Eigenschaft, jedoch gelten die folgenden zusätzlichen Punkte:
+Dieses Attribut hat die gleichen Parameterwerte und Bedeutungen wie die CSS-{{cssxref("overflow")}}-Eigenschaft, jedoch gelten die folgenden zusätzlichen Punkte:
 
-- Wenn es den Wert `visible` hat, hat das Attribut keine Wirkung (d. h., ein Clipping-Rechteck wird nicht erstellt).
-- Hat die `overflow`-Eigenschaft den Wert `hidden` oder `scroll`, wird ein Clip in genau der Größe des SVG-Viewports angewendet.
-- Beim {{SVGElement("svg")}}-Element wird normalerweise, wenn `scroll` angegeben ist, ein Bildlauf oder Panner für den SVG-Viewport angezeigt, unabhängig davon, ob sein Inhalt beschnitten ist oder nicht.
-- Innerhalb von SVG-Inhalten impliziert der Wert `auto`, dass aller gerenderter Inhalt für Kindelemente sichtbar sein muss, entweder durch einen Bildlaufmechanismus oder durch Rendern ohne Clip.
+- Wenn es den Wert `visible` hat, hat das Attribut keinen Effekt (d. h., ein begrenztes Rechteck wird nicht erstellt).
+- Wenn die `overflow`-Eigenschaft den Wert `hidden` oder `scroll` hat, wird ein Clip von der genauen Größe der SVG-Ansicht angewendet.
+- Wenn `scroll` auf einem {{SVGElement("svg")}}-Element angegeben ist, wird normalerweise eine Scrollleiste oder ein Verschieber für die SVG-Ansicht angezeigt, unabhängig davon, ob irgendein Inhalt abgeschnitten ist oder nicht.
+- Innerhalb von SVG-Inhalten impliziert der Wert `auto`, dass alle gerenderten Inhalte für untergeordnete Elemente sichtbar sein müssen, entweder durch einen Scroll-Mechanismus oder indem sie ohne Clip gerendert werden.
 
 > [!NOTE]
-> Obwohl der Anfangswert für overflow `auto` ist, wird er im User-Agent-Stylesheet für das {{SVGElement("svg")}}-Element überschrieben, wenn es nicht das Wurzelelement eines eigenständigen Dokuments ist, sowie für das {{SVGElement("pattern")}}-Element und das {{SVGElement("marker")}}-Element, sodass diese standardmäßig versteckt sind.
+> Obwohl der Anfangswert für overflow `auto` ist, wird er im User-Agent-Stylesheet für das {{SVGElement("svg")}}-Element überschrieben, wenn es nicht das Stamm-Element eines eigenständigen Dokuments ist, sowie für das {{SVGElement("pattern")}}- und das {{SVGElement("marker")}}-Element, um standardmäßig verborgen zu sein.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `overflow` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS-{{cssxref("overflow")}}-Eigenschaft.
 
-Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
+Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
 - {{SVGElement("foreignObject")}}
 - {{SVGElement("image")}}
@@ -52,7 +52,7 @@ svg {
 
 {{EmbedLiveSample("Example", "200", "50")}}
 
-## Anwendungshinweise
+## Verwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -74,7 +74,7 @@ svg {
   </tbody>
 </table>
 
-Für eine Beschreibung der Werte siehe die CSS-{{cssxref("overflow")}}-Eigenschaft.
+Für eine Beschreibung der Werte siehe bitte die CSS-{{cssxref("overflow")}}-Eigenschaft.
 
 ## Spezifikationen
 
@@ -86,4 +86,4 @@ Für eine Beschreibung der Werte siehe die CSS-{{cssxref("overflow")}}-Eigenscha
 
 ## Siehe auch
 
-- {{cssxref("overflow")}}
+- CSS-{{cssxref("overflow")}}-Eigenschaft
diff --git a/files/de/web/svg/attribute/pointer-events/index.md b/files/de/web/svg/attribute/pointer-events/index.md
index 2575f275c..4424c0b7b 100644
--- a/files/de/web/svg/attribute/pointer-events/index.md
+++ b/files/de/web/svg/attribute/pointer-events/index.md
@@ -2,17 +2,17 @@
 title: pointer-events
 slug: Web/SVG/Attribute/pointer-events
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`pointer-events`**-Attribut ist ein Präsentationsattribut, das definiert, ob oder wann ein Element das Ziel eines Mausereignisses sein kann.
+Das Attribut **`pointer-events`** ist ein Präsentationsattribut, das bestimmt, ob oder wann ein Element das Ziel eines Mausereignisses sein kann.
 
 > [!NOTE]
 > Als Präsentationsattribut kann {{cssxref('pointer-events')}} auch als CSS-Eigenschaft verwendet werden.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement('a')}}
 - {{SVGElement('circle')}}
@@ -84,7 +84,7 @@ window.addEventListener("mouseup", (e) => {
 
 {{EmbedLiveSample("Example", '100%', 150)}}
 
-## Nutzungshinweise
+## Anmerkungen zur Verwendung
 
 <table class="properties">
   <tbody>
@@ -108,7 +108,7 @@ window.addEventListener("mouseup", (e) => {
   </tbody>
 </table>
 
-_Für eine detaillierte Erklärung der möglichen Werte schauen Sie bitte in die CSS-Dokumentation zu {{cssxref('pointer-events')}}._
+_Eine detaillierte Erklärung der einzelnen möglichen Werte finden Sie in der CSS-Dokumentation zu {{cssxref('pointer-events')}}._
 
 ## Spezifikationen
 
@@ -117,3 +117,7 @@ _Für eine detaillierte Erklärung der möglichen Werte schauen Sie bitte in die
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS-Eigenschaft {{cssxref("pointer-events")}}
diff --git a/files/de/web/svg/attribute/r/index.md b/files/de/web/svg/attribute/r/index.md
index 59b850da0..7f30e6a6a 100644
--- a/files/de/web/svg/attribute/r/index.md
+++ b/files/de/web/svg/attribute/r/index.md
@@ -2,7 +2,7 @@
 title: r
 slug: Web/SVG/Attribute/r
 l10n:
-  sourceCommit: fceea994be5c930065bb1f2b45bee9ac38de491c
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
@@ -14,7 +14,7 @@ Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 - {{SVGElement("circle")}}
 - {{SVGElement("radialGradient")}}
 
-Prozentangaben beziehen sich auf die normalisierte Diagonale des aktuellen SVG-Viewports, die wie folgt berechnet wird: <math><mfrac><msqrt><mrow><msup><mi>&lt;width&gt;</mi><mn>2</mn></msup><mo>+</mo><msup><mi>&lt;height&gt;</mi><mn>2</mn></msup></mrow></msqrt><msqrt><mn>2</mn></msqrt></mfrac></math>.
+Prozentsätze beziehen sich auf die normierte Diagonale des aktuellen SVG-Ansichtsfensters, die wie folgt berechnet wird: <math><mfrac><msqrt><mrow><msup><mi>&lt;width&gt;</mi><mn>2</mn></msup><mo>+</mo><msup><mi>&lt;height&gt;</mi><mn>2</mn></msup></mrow></msqrt><msqrt><mn>2</mn></msqrt></mfrac></math>.
 
 ## Beispiel
 
@@ -55,7 +55,7 @@ svg {
 
 ## circle
 
-Für {{SVGElement('circle')}} definiert `r` den Radius des Kreises und damit dessen Größe. Bei einem Wert kleiner oder gleich null wird der Kreis überhaupt nicht gezeichnet.
+Für {{SVGElement('circle')}} definiert `r` den Radius des Kreises und somit seine Größe. Mit einem Wert kleiner oder gleich null wird der Kreis überhaupt nicht gezeichnet.
 
 <table class="properties">
   <tbody>
@@ -93,35 +93,9 @@ Für {{SVGElement('circle')}} definiert `r` den Radius des Kreises und damit des
 
 Für {{ SVGElement("radialGradient") }} definiert `r` den Radius des Endkreises für den radialen Verlauf.
 
-Der Verlauf wird so gezeichnet, dass der **100%** Verlaufsstopp auf den Umfang dieses Endkreises abgebildet wird. Ein Wert kleiner oder gleich null führt dazu, dass der Bereich als einheitliche Farbe unter Verwendung der Farbe und Deckkraft des letzten Verlauf-{{ SVGElement("stop") }}-Elements dargestellt wird.
+Der Verlauf wird so gezeichnet, dass der **100%**-Verlaufspunkt dem Umfang dieses Endkreises zugeordnet wird. Ein Wert kleiner oder gleich null führt dazu, dass der Bereich als einheitliche Farbe unter Verwendung der Farbe und Deckkraft des letzten Verlaufs-{{ SVGElement("stop") }} gemalt wird.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row">Wert</th>
-      <td>
-        <strong
-          ><a href="/de/docs/Web/SVG/Content_type#length"
-            >&#x3C;length></a
-          ></strong
-        >
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Standardwert</th>
-      <td><code>50%</code></td>
-    </tr>
-    <tr>
-      <th scope="row">Animierbar</th>
-      <td>Ja</td>
-    </tr>
-  </tbody>
-</table>
-
-## Spezifikationen
-
-{{Specifications}}
-
-## Browser-Kompatibilität
-
-{{Compat}}
+      <th scope="row">Wert</
diff --git a/files/de/web/svg/attribute/rx/index.md b/files/de/web/svg/attribute/rx/index.md
index d34ae065b..6b830340b 100644
--- a/files/de/web/svg/attribute/rx/index.md
+++ b/files/de/web/svg/attribute/rx/index.md
@@ -2,7 +2,7 @@
 title: rx
 slug: Web/SVG/Attribute/rx
 l10n:
-  sourceCommit: 29a5380c100ee4ca462db3690ad4065a9d23895c
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
@@ -38,9 +38,9 @@ svg {
 
 {{EmbedLiveSample("Example", '100%', 200)}}
 
-## ellipse
+## Ellipse
 
-Für {{SVGElement('ellipse')}} definiert `rx` den x-Radius der Form. Bei einem Wert kleiner oder gleich null wird die Ellipse überhaupt nicht gezeichnet.
+Für {{SVGElement('ellipse')}} definiert `rx` den x-Radius der Form. Mit einem Wert kleiner oder gleich null wird die Ellipse überhaupt nicht gezeichnet.
 
 <table class="properties">
   <tbody>
@@ -73,17 +73,17 @@ Für {{SVGElement('ellipse')}} definiert `rx` den x-Radius der Form. Bei einem W
 </table>
 
 > [!NOTE]
-> Der x-Radius der `<ellipse>` kann auch mit der {{cssxref("rx")}} _Geometrie-Eigenschaft_ definiert werden. Wenn im CSS festgelegt, überschreibt der Wert der `rx`-Eigenschaft den Wert des `rx`-Attributs.
+> Der x-Radius der `<ellipse>` kann ebenfalls mit der {{cssxref("rx")}} _Geometrie-Eigenschaft_ definiert werden. Wenn in CSS festgelegt, überschreibt der `rx`-Eigenschaftswert den `rx`-Attributwert.
 
-## rect
+## Rechteck
 
-Für {{SVGElement('rect')}} definiert `rx` den x-Achsenradius der Ellipse, die zum Abrunden der Ecken des Rechtecks verwendet wird.
+Für {{SVGElement('rect')}} definiert `rx` den x-Achsenradius der Ellipse, die verwendet wird, um die Ecken des Rechtecks abzurunden.
 
-Die Interpretation des `rx`-Attributswerts hängt sowohl vom {{SVGAttr("ry")}}-Attribut als auch von der Breite des Rechtecks ab:
+Die Interpretation des Wertes des `rx`-Attributs hängt sowohl vom {{SVGAttr("ry")}}-Attribut als auch von der Breite des Rechtecks ab:
 
-- Wenn ein ordnungsgemäß spezifizierter Wert für `rx` angegeben wird, aber nicht für {{SVGAttr("ry")}} (oder umgekehrt), dann wird der Browser den fehlenden Wert als gleich dem definierten Wert betrachten.
-- Wenn weder `rx` noch {{SVGAttr("ry")}} einen ordnungsgemäß spezifizierten Wert haben, wird der Browser ein Rechteck mit rechteckigen Ecken zeichnen.
-- Wenn `rx` größer als die Hälfte der Breite des Rechtecks ist, wird der Browser den Wert für `rx` als die halbe Breite des Rechtecks betrachten.
+- Wenn ein ordnungsgemäß spezifizierter Wert für `rx` angegeben wird, aber nicht für {{SVGAttr("ry")}} (oder umgekehrt), geht der Browser davon aus, dass der fehlende Wert gleich dem definierten ist.
+- Wenn weder `rx` noch {{SVGAttr("ry")}} einen ordnungsgemäß spezifizierten Wert haben, wird der Browser ein Rechteck mit rechtwinkligen Ecken zeichnen.
+- Wenn `rx` mehr als die Hälfte der Breite des Rechtecks beträgt, betrachtet der Browser den Wert von `rx` als die Hälfte der Breite des Rechtecks.
 
 <table class="properties">
   <tbody>
@@ -116,8 +116,12 @@ Die Interpretation des `rx`-Attributswerts hängt sowohl vom {{SVGAttr("ry")}}-A
 </table>
 
 > [!NOTE]
-> Die horizontale Kurve der Ecken des `<rect>` kann auch mit der {{cssxref("rx")}} _Geometrie-Eigenschaft_ definiert werden. Wenn im CSS festgelegt, überschreibt der Wert der `rx`-Eigenschaft den Wert des `rx`-Attributs.
+> Die horizontale Krümmung der Ecken des `<rect>` kann ebenfalls mit der {{cssxref("rx")}} _Geometrie-Eigenschaft_ definiert werden. Wenn in CSS festgelegt, überschreibt der `rx`-Eigenschaftswert den `rx`-Attributwert.
 
 ## Spezifikationen
 
 {{Specifications}}
+
+## Siehe auch
+
+- CSS {{cssxref("rx")}}-Eigenschaft
diff --git a/files/de/web/svg/attribute/ry/index.md b/files/de/web/svg/attribute/ry/index.md
index 263f34e0a..efee597ce 100644
--- a/files/de/web/svg/attribute/ry/index.md
+++ b/files/de/web/svg/attribute/ry/index.md
@@ -2,12 +2,12 @@
 title: ry
 slug: Web/SVG/Attribute/ry
 l10n:
-  sourceCommit: 29a5380c100ee4ca462db3690ad4065a9d23895c
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`ry`**-Attribut definiert einen Radius auf der y-Achse.
+Das **`ry`** Attribut definiert einen Radius auf der y-Achse.
 
 Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
@@ -36,7 +36,7 @@ svg {
 </svg>
 ```
 
-{{EmbedLiveSample("Beispiel", '100%', 200)}}
+{{EmbedLiveSample("Example", '100%', 200)}}
 
 ## ellipse
 
@@ -73,17 +73,17 @@ Für {{SVGElement('ellipse')}} definiert `ry` den y-Radius der Form. Bei einem W
 </table>
 
 > [!NOTE]
-> Der y-Radius der `<ellipse>` kann auch mit der {{cssxref("ry")}} _Geometrics-Eigenschaft_ definiert werden. Wenn er in CSS festgelegt ist, überschreibt der `ry`-Eigenschaftswert den `ry`-Attributwert.
+> Der y-Radius der `<ellipse>` kann auch mit der {{cssxref("ry")}} _geometrischen Eigenschaft_ definiert werden. Wenn in CSS festgelegt, überschreibt der `ry` Eigenschaftswert den `ry` Attributwert.
 
 ## rect
 
 Für {{SVGElement('rect')}} definiert `ry` den y-Achsen-Radius der Ellipse, die verwendet wird, um die Ecken des Rechtecks abzurunden.
 
-Die Art und Weise, wie der Wert des `ry`-Attributs interpretiert wird, hängt sowohl vom {{SVGAttr("rx")}}-Attribut als auch von der Breite des Rechtecks ab:
+Die Art und Weise, wie der Wert des `ry` Attributs interpretiert wird, hängt sowohl vom {{SVGAttr("rx")}} Attribut als auch von der Breite des Rechtecks ab:
 
-- Wenn ein ordnungsgemäß angegebener Wert für `ry`, aber nicht für {{SVGAttr("rx")}} (oder umgekehrt) bereitgestellt wird, nimmt der Browser den fehlenden Wert als gleich dem definierten Wert an.
-- Wenn weder `ry` noch {{SVGAttr("rx")}} einen ordnungsgemäß angegebenen Wert haben, zeichnet der Browser ein Rechteck mit rechtwinkligen Ecken.
-- Wenn `ry` größer als die Hälfte der Breite des Rechtecks ist, nimmt der Browser den Wert für `ry` als die Hälfte der Breite des Rechtecks an.
+- Wenn ein ordnungsgemäß angegebener Wert für `ry` aber nicht für {{SVGAttr("rx")}} bereitgestellt wird (oder umgekehrt), wird der Browser den fehlenden Wert als dem definierten Wert gleich betrachten.
+- Wenn weder `ry` noch {{SVGAttr("rx")}} einen ordnungsgemäß angegebenen Wert haben, zeichnet der Browser ein Rechteck mit rechteckigen Ecken.
+- Wenn `ry` größer als die Hälfte der Breite des Rechtecks ist, betrachtet der Browser den Wert für `ry` als die Hälfte der Breite des Rechtecks.
 
 <table class="properties">
   <tbody>
@@ -116,8 +116,12 @@ Die Art und Weise, wie der Wert des `ry`-Attributs interpretiert wird, hängt so
 </table>
 
 > [!NOTE]
-> Die vertikale Krümmung der Ecken des `<rect>` kann auch mit der {{cssxref("ry")}} _Geometrics-Eigenschaft_ definiert werden. Wenn in CSS festgelegt, überschreibt der `ry`-Eigenschaftswert den `ry`-Attributwert.
+> Die vertikale Kurve der Ecken des `<rect>` kann auch mit der {{cssxref("ry")}} _geometrischen Eigenschaft_ definiert werden. Wenn in CSS festgelegt, überschreibt der `ry` Eigenschaftswert den `ry` Attributwert.
 
 ## Spezifikationen
 
 {{Specifications}}
+
+## Siehe auch
+
+- CSS {{cssxref("ry")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/stroke-dasharray/index.md b/files/de/web/svg/attribute/stroke-dasharray/index.md
index cfe451450..ec9bff426 100644
--- a/files/de/web/svg/attribute/stroke-dasharray/index.md
+++ b/files/de/web/svg/attribute/stroke-dasharray/index.md
@@ -2,12 +2,12 @@
 title: stroke-dasharray
 slug: Web/SVG/Attribute/stroke-dasharray
 l10n:
-  sourceCommit: 4d2346118b6ef233ce9a2b91b95a0295ebe145e2
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das Attribut **`stroke-dasharray`** ist ein Präsentationsattribut, das das Muster von Strichen und Lücken definiert, das zum Zeichnen der Kontur der Form verwendet wird.
+Das Attribut **`stroke-dasharray`** ist ein Präsentationsattribut, das das Muster von Strichen und Lücken definiert, das zur Darstellung der Umrandung der Form verwendet wird.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `stroke-dasharray` als CSS-Eigenschaft verwendet werden. Siehe {{cssxref('stroke-dasharray')}} für mehr Informationen.
@@ -65,7 +65,7 @@ svg {
 
 {{EmbedLiveSample("Example", '100%', 150)}}
 
-## Hinweise zur Verwendung
+## Nutzungshinweise
 
 <table class="properties">
   <tbody>
@@ -86,9 +86,9 @@ svg {
 
 - \<dasharray>
 
-  - : Eine Liste von durch Komma und/oder Weißraum getrennten [`<length>`](/de/docs/Web/SVG/Content_type#length)s und [`<percentage>`](/de/docs/Web/SVG/Content_type#percentage)s, die die Längen der abwechselnden Striche und Lücken angeben.
+  - : Eine Liste von durch Kommas und/oder Leerzeichen getrennten [`<length>`](/de/docs/Web/SVG/Content_type#length)s und [`<percentage>`](/de/docs/Web/SVG/Content_type#percentage)s, die die Längen der abwechselnden Striche und Lücken spezifizieren.
 
-    Wenn eine ungerade Anzahl von Werten angegeben wird, wird die Liste der Werte wiederholt, um eine gerade Anzahl von Werten zu erhalten. Daher ist `5,3,2` gleichbedeutend mit `5,3,2,5,3,2`.
+    Wenn eine ungerade Anzahl von Werten angegeben wird, wird die Liste der Werte wiederholt, um eine gerade Anzahl von Werten zu erhalten. Somit ist `5,3,2` gleichwertig mit `5,3,2,5,3,2`.
 
 ## Spezifikationen
 
@@ -97,3 +97,7 @@ svg {
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("stroke-dasharray")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/stroke-dashoffset/index.md b/files/de/web/svg/attribute/stroke-dashoffset/index.md
index 8763c4677..3a31ef064 100644
--- a/files/de/web/svg/attribute/stroke-dashoffset/index.md
+++ b/files/de/web/svg/attribute/stroke-dashoffset/index.md
@@ -2,17 +2,17 @@
 title: stroke-dashoffset
 slug: Web/SVG/Attribute/stroke-dashoffset
 l10n:
-  sourceCommit: 4d2346118b6ef233ce9a2b91b95a0295ebe145e2
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das Attribut **`stroke-dashoffset`** ist ein Präsentationsattribut, das einen Versatz bei der Darstellung des zugehörigen Strichmusters definiert.
+Das Attribut **`stroke-dashoffset`** ist ein Präsentationsattribut, das einen Versatz bei der Darstellung des zugehörigen Strichmusters festlegt.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `stroke-dashoffset` als CSS-Eigenschaft verwendet werden. Siehe {{cssxref('stroke-dashoffset')}} für weitere Informationen.
+> Als Präsentationsattribut kann `stroke-dashoffset` auch als CSS-Eigenschaft verwendet werden. Siehe {{cssxref('stroke-dashoffset')}} für mehr Informationen.
 
-Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
+Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
 - {{SVGElement('circle')}}
 - {{SVGElement('ellipse')}}
@@ -94,7 +94,7 @@ svg {
 
 {{EmbedLiveSample("Example", '100%', 200)}}
 
-## Verwendungshinweise
+## Anwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -125,7 +125,7 @@ svg {
   </tbody>
 </table>
 
-Der Versatz wird normalerweise in Benutzereinheiten angegeben, die relativ zu {{SVGAttr('pathLength')}} aufgelöst werden. Wenn jedoch ein [\<percentage>](/de/docs/Web/SVG/Content_type#percentage) verwendet wird, wird der Wert als Prozentsatz des aktuellen Ansichtsfensters aufgelöst.
+Der Versatz wird normalerweise in Benutzereinheiten ausgedrückt, die im Verhältnis zur {{SVGAttr('pathLength')}} aufgelöst werden. Wenn jedoch ein [\<percentage>](/de/docs/Web/SVG/Content_type#percentage) verwendet wird, wird der Wert als Prozentsatz des aktuellen Ansichtsfensters aufgelöst.
 
 ## Spezifikationen
 
@@ -134,3 +134,7 @@ Der Versatz wird normalerweise in Benutzereinheiten angegeben, die relativ zu {{
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("stroke-dashoffset")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/stroke-linecap/index.md b/files/de/web/svg/attribute/stroke-linecap/index.md
index 639e2ba4d..ee28d2b46 100644
--- a/files/de/web/svg/attribute/stroke-linecap/index.md
+++ b/files/de/web/svg/attribute/stroke-linecap/index.md
@@ -2,17 +2,17 @@
 title: stroke-linecap
 slug: Web/SVG/Attribute/stroke-linecap
 l10n:
-  sourceCommit: 4d2346118b6ef233ce9a2b91b95a0295ebe145e2
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`stroke-linecap`** Attribut ist ein Präsentationsattribut, das die Form definiert, die am Ende von offenen Teilpfaden verwendet werden soll, wenn diese gestrichen werden.
+Das **`stroke-linecap`** Attribut ist ein Präsentationsattribut, das die Form definiert, die am Ende von offenen Unterpfaden verwendet werden soll, wenn sie gestrichen werden.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `stroke-linecap` als CSS-Eigenschaft verwendet werden. Siehe {{cssxref('stroke-linecap')}} für mehr.
+> Als Präsentationsattribut kann `stroke-linecap` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie unter {{cssxref('stroke-linecap')}}.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement('path')}}
 - {{SVGElement('polyline')}}
@@ -74,7 +74,7 @@ svg {
 
 ### butt
 
-Der Wert `butt` gibt an, dass der Strich für jeden Teilpfad nicht über seine beiden Endpunkte hinausgeht. Bei einem Teilpfad mit null Länge wird der Pfad überhaupt nicht gerendert.
+Der Wert `butt` zeigt an, dass der Strich für jeden Unterpfad nicht über seine beiden Endpunkte hinausreicht. Bei einem Unterpfad mit null Länge wird der Pfad überhaupt nicht dargestellt.
 
 #### Beispiel
 
@@ -109,7 +109,7 @@ svg {
 
 ### round
 
-Der Wert `round` gibt an, dass am Ende jedes Teilpfads der Strich um einen Halbkreis mit einem Durchmesser erweitert wird, der der Strichbreite entspricht. Bei einem Teilpfad mit null Länge besteht der Strich aus einem vollen Kreis, der am Punkt des Teilpfads zentriert ist.
+Der Wert `round` zeigt an, dass der Strich am Ende jedes Unterpfads um einen Halbkreis mit einem Durchmesser, der der Strichbreite entspricht, verlängert wird. Bei einem Unterpfad mit null Länge besteht der Strich aus einem vollständigen Kreis, der auf den Punkt des Unterpfads zentriert ist.
 
 #### Beispiel
 
@@ -144,7 +144,7 @@ svg {
 
 ### square
 
-Der Wert `square` gibt an, dass am Ende jedes Teilpfads der Strich um ein Rechteck mit einer Breite erweitert wird, die der halben Breite des Strichs entspricht, und einer Höhe, die der Breite des Strichs entspricht. Bei einem Teilpfad mit null Länge besteht der Strich aus einem Quadrat mit einer Breite, die der Strichbreite entspricht, zentriert am Punkt des Teilpfads.
+Der Wert `square` zeigt an, dass der Strich am Ende jedes Unterpfads um ein Rechteck mit einer Breite, die der halben Breite des Strichs entspricht, und einer Höhe, die der Breite des Strichs entspricht, verlängert wird. Bei einem Unterpfad mit null Länge besteht der Strich aus einem Quadrat mit einer Breite, die der Strichbreite entspricht, zentriert auf den Punkt des Unterpfads.
 
 #### Beispiel
 
@@ -184,3 +184,7 @@ svg {
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("stroke-linecap")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/stroke-linejoin/index.md b/files/de/web/svg/attribute/stroke-linejoin/index.md
index d32a09f75..7e6b8c400 100644
--- a/files/de/web/svg/attribute/stroke-linejoin/index.md
+++ b/files/de/web/svg/attribute/stroke-linejoin/index.md
@@ -2,17 +2,17 @@
 title: stroke-linejoin
 slug: Web/SVG/Attribute/stroke-linejoin
 l10n:
-  sourceCommit: 4d2346118b6ef233ce9a2b91b95a0295ebe145e2
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`stroke-linejoin`** Attribut ist ein Präsentationsattribut, das die Form definiert, die an den Ecken von Pfaden verwendet wird, wenn sie gestrichen werden.
+Das **`stroke-linejoin`** Attribut ist ein Präsentationsattribut, das die Form definiert, die an den Ecken von Pfaden verwendet werden soll, wenn sie gestrichen werden.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `stroke-linejoin` als CSS-Eigenschaft verwendet werden. Siehe {{cssxref('stroke-linejoin')}} für mehr Informationen.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement('path')}}
 - {{SVGElement('polygon')}}
@@ -135,9 +135,9 @@ svg {
 ### arcs
 
 > [!NOTE]
-> Der `arcs` Wert wurde in SVG2 eingeführt und wird noch nicht weitgehend unterstützt. Siehe unten [Browser-Kompatibilität](#browser-kompatibilität) für Details.
+> Der `arcs` Wert wurde in SVG2 eingeführt und wird noch nicht weitgehend unterstützt, siehe unten [Browser-Kompatibilität](#browser-kompatibilität) für Details.
 
-Der `arcs` Wert gibt an, dass ein Bogen für die Verbindung von Pfadsegmenten verwendet werden soll. Die Bogenform entsteht, indem die äußeren Kanten des Strichs an der Verbindungsstelle mit Bögen fortgesetzt werden, die die gleiche Krümmung wie die äußeren Kanten an der Verbindungsstelle haben.
+Der `arcs` Wert gibt an, dass eine Bogenkannte verwendet werden soll, um die Pfadsegmente zu verbinden. Die Bogenform wird gebildet, indem die äußeren Kanten des Strichs am Verbindungspunkt mit Bögen verlängert werden, die die gleiche Krümmung wie die äußeren Kanten am Verbindungspunkt haben.
 
 ```css hidden
 html,
@@ -177,7 +177,7 @@ svg {
 
 ### bevel
 
-Der `bevel` Wert gibt an, dass eine abgeschrägte Ecke zur Verbindung von Pfadsegmenten verwendet werden soll.
+Der `bevel` Wert gibt an, dass eine abgeschrägte Ecke verwendet werden soll, um die Pfadsegmente zu verbinden.
 
 ```css hidden
 html,
@@ -213,10 +213,10 @@ svg {
 
 ### miter
 
-Der `miter` Wert gibt an, dass eine scharfe Ecke zur Verbindung von Pfadsegmenten verwendet werden soll. Die Ecke entsteht, indem die äußeren Kanten des Strichs an den Tangenten der Pfadsegmente fortgeführt werden, bis sie sich schneiden.
+Der `miter` Wert gibt an, dass eine scharfe Ecke verwendet werden soll, um die Pfadsegmente zu verbinden. Die Ecke wird gebildet, indem die äußeren Kanten des Strichs an den Tangenten der Pfadsegmente verlängert werden, bis sie sich schneiden.
 
 > [!NOTE]
-> Wenn das {{SVGAttr('stroke-miterlimit')}} überschritten wird, wird auf `bevel` zurückgegriffen.
+> Wenn das {{SVGAttr('stroke-miterlimit')}} überschritten wird, fällt die Linienverbindung auf `bevel` zurück.
 
 ```css hidden
 html,
@@ -275,11 +275,11 @@ svg {
 ### miter-clip
 
 > [!NOTE]
-> Der `miter-clip` Wert wurde in SVG2 eingeführt und wird noch nicht weitgehend unterstützt. Siehe unten [Browser-Kompatibilität](#browser-kompatibilität) für Details.
+> Der `miter-clip` Wert wurde in SVG2 eingeführt und wird noch nicht weitgehend unterstützt, siehe unten [Browser-Kompatibilität](#browser-kompatibilität) für Details.
 
-Der `miter-clip` Wert gibt an, dass eine scharfe Ecke zur Verbindung von Pfadsegmenten verwendet werden soll. Die Ecke entsteht, indem die äußeren Kanten des Strichs an den Tangenten der Pfadsegmente fortgeführt werden, bis sie sich schneiden.
+Der `miter-clip` Wert gibt an, dass eine scharfe Ecke verwendet werden soll, um die Pfadsegmente zu verbinden. Die Ecke wird gebildet, indem die äußeren Kanten des Strichs an den Tangenten der Pfadsegmente verlängert werden, bis sie sich schneiden.
 
-Wenn das {{SVGAttr('stroke-miterlimit')}} überschritten wird, wird das Gehrungsende in einer Entfernung gekürzt, die der Hälfte des {{SVGAttr('stroke-miterlimit')}} Wertes multipliziert mit der Strichbreite vom Schnittpunkt der Pfadsegmente entspricht. Dies bietet eine bessere Darstellung als `miter` bei sehr scharfen Verbindungen oder im Falle einer Animation.
+Wenn das {{SVGAttr('stroke-miterlimit')}} überschritten wird, wird der Gehrungsschnitt in einer Entfernung abgeschnitten, die gleich dem halben Wert des {{SVGAttr('stroke-miterlimit')}} multipliziert mit der Strichbreite von dem Schnittpunkt der Pfadsegmente ist. Dies bietet eine bessere Wiedergabe als `miter` bei sehr scharfen Verbindungen oder im Falle einer Animation.
 
 ```css hidden
 html,
@@ -336,7 +336,7 @@ svg {
 
 ### round
 
-Der `round` Wert gibt an, dass eine abgerundete Ecke zur Verbindung von Pfadsegmenten verwendet werden soll.
+Der `round` Wert gibt an, dass eine abgerundete Ecke verwendet werden soll, um die Pfadsegmente zu verbinden.
 
 ```css hidden
 html,
@@ -377,3 +377,7 @@ svg {
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("stroke-linejoin")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/stroke-miterlimit/index.md b/files/de/web/svg/attribute/stroke-miterlimit/index.md
index d7821c187..75ff78a3e 100644
--- a/files/de/web/svg/attribute/stroke-miterlimit/index.md
+++ b/files/de/web/svg/attribute/stroke-miterlimit/index.md
@@ -2,15 +2,15 @@
 title: stroke-miterlimit
 slug: Web/SVG/Attribute/stroke-miterlimit
 l10n:
-  sourceCommit: 4d2346118b6ef233ce9a2b91b95a0295ebe145e2
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`stroke-miterlimit`**-Attribut ist ein Präsentationsattribut, das eine Grenze für das Verhältnis der Gehrungslänge zur {{ SVGAttr("stroke-width") }} festlegt, die verwendet wird, um eine Gehrungsverbindung zu zeichnen. Wenn das Limit überschritten wird, wird die Verbindung von einer Gehrung in eine Fase umgewandelt.
+Das **`stroke-miterlimit`** Attribut ist ein Präsentationsattribut, das ein Limit für das Verhältnis der Gehrungslänge zur {{ SVGAttr("stroke-width") }} festlegt, die zum Zeichnen einer Gehrungsverbindung verwendet wird. Wird das Limit überschritten, wird die Verbindung von einer Gehrung in eine Fase umgewandelt.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `stroke-miterlimit` als CSS-Eigenschaft verwendet werden. Siehe {{cssxref('stroke-miterlimit')}} für weitere Informationen.
+> Als Präsentationsattribut kann `stroke-miterlimit` als CSS-Eigenschaft verwendet werden. Siehe {{cssxref('stroke-miterlimit')}} für mehr Informationen.
 
 Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
@@ -86,9 +86,9 @@ svg {
 
 {{EmbedLiveSample("Example", '100%', 400)}}
 
-Wenn sich zwei Liniensegmente in einem scharfen Winkel treffen und `miter`-Verbindungen für {{ SVGAttr("stroke-linejoin") }} angegeben wurden, kann es möglich sein, dass die Gehrung weit über die Dicke der pfadzeichnenden Linie hinausreicht. Das `stroke-miterlimit`-Verhältnis wird verwendet, um zu definieren, wann das Limit überschritten wird; in diesem Fall wird die Verbindung von einer Gehrung in eine Fase umgewandelt.
+Wenn zwei Liniensegmente in einem scharfen Winkel aufeinandertreffen und `miter`-Verbindungen für {{ SVGAttr("stroke-linejoin") }} angegeben wurden, kann es passieren, dass die Gehrung weit über die Dicke der Linie, die den Pfad streicht, hinausgeht. Das `stroke-miterlimit`-Verhältnis wird verwendet, um zu definieren, wann das Limit überschritten wird. In diesem Fall wird die Verbindung von einer Gehrung in eine Fase umgewandelt.
 
-Das Verhältnis von Gehrungslänge (Abstand zwischen der äußeren Spitze und der inneren Ecke der Gehrung) zur {{ SVGAttr("stroke-width") }} steht in direktem Zusammenhang mit dem Winkel (theta) zwischen den Segmenten im Benutzerbereich durch die Formel:
+Das Verhältnis der Gehrungslänge (Abstand zwischen der äußeren Spitze und der inneren Ecke der Gehrung) zur {{ SVGAttr("stroke-width") }} steht in direktem Zusammenhang mit dem Winkel (Theta) zwischen den Segmenten im Benutzerraum durch die Formel:
 
 <!-- prettier-ignore-start -->
 <math display="block">
@@ -96,7 +96,7 @@ Das Verhältnis von Gehrungslänge (Abstand zwischen der äußeren Spitze und de
 </math>
 <!-- prettier-ignore-end -->
 
-Zum Beispiel wandelt ein Gehrungslimit von 1.414 Gehrungen für Theta unter 90 Grad in Fasen um, ein Limit von 4.0 wandelt sie für Theta unter etwa 29 Grad um, und ein Limit von 10.0 wandelt sie für Theta unter etwa 11.5 Grad um.
+Zum Beispiel konvertiert ein Gehrungslimit von 1,414 Gehrungen in Fasen für Theta kleiner als 90 Grad, ein Limit von 4,0 konvertiert sie für Theta kleiner als ungefähr 29 Grad, und ein Limit von 10,0 konvertiert sie für Theta kleiner als ungefähr 11,5 Grad.
 
 ## Verwendungskontext
 
@@ -132,3 +132,7 @@ Der Wert von `stroke-miterlimit` muss größer oder gleich 1 sein.
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("stroke-miterlimit")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/stroke-opacity/index.md b/files/de/web/svg/attribute/stroke-opacity/index.md
index 4e4c1393c..83aefe62b 100644
--- a/files/de/web/svg/attribute/stroke-opacity/index.md
+++ b/files/de/web/svg/attribute/stroke-opacity/index.md
@@ -2,12 +2,12 @@
 title: stroke-opacity
 slug: Web/SVG/Attribute/stroke-opacity
 l10n:
-  sourceCommit: 4d2346118b6ef233ce9a2b91b95a0295ebe145e2
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`stroke-opacity`** Attribut ist ein Präsentationsattribut, das die Deckkraft des Farbgebers (_Farbe_, _Verlauf_, _Muster_ usw.) definiert, der auf den Rand einer Form angewendet wird.
+Das **`stroke-opacity`** Attribut ist ein Präsentationsattribut, das die Deckkraft des Farbgebers (_Farbe_, _Verlauf_, _Muster_, etc.) definiert, der auf den Umriss einer Form angewendet wird.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `stroke-opacity` als CSS-Eigenschaft verwendet werden. Siehe {{cssxref('stroke-opacity')}} für mehr Informationen.
@@ -54,7 +54,7 @@ svg {
 
 {{EmbedLiveSample("Example", '100%', 150)}}
 
-## Hinweise zur Nutzung
+## Anwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -80,7 +80,7 @@ svg {
   </tbody>
 </table>
 
-Es ist wichtig zu wissen, dass der Rand teilweise die Füllung einer Form überdeckt. Ein Rand mit einer Deckkraft ungleich `1` wird die darunterliegende Füllung teilweise sichtbar machen. Um diesen Effekt zu vermeiden, kann eine globale Deckkraft mit dem {{SVGAttr('opacity')}} Attribut angewendet oder der Rand hinter die Füllung mit dem {{SVGAttr('paint-order')}} Attribut verschoben werden.
+Es ist wichtig zu wissen, dass der Umriss teilweise die Füllung einer Form überdeckt, sodass ein Umriss mit einer Deckkraft ungleich `1` die darunterliegende Füllung teilweise zeigt. Um diesen Effekt zu vermeiden, kann eine globale Deckkraft mit dem {{SVGAttr('opacity')}} Attribut angewendet oder der Umriss hinter die Füllung mit dem {{SVGAttr('paint-order')}} Attribut gelegt werden.
 
 ## Spezifikationen
 
@@ -92,16 +92,4 @@ Es ist wichtig zu wissen, dass der Rand teilweise die Füllung einer Form überd
 
 ## Siehe auch
 
-CSS Eigenschaften:
-
-- {{cssxref('stroke-opacity')}}
-- {{cssxref('stroke')}}
-- {{cssxref('opacity')}}
-- {{cssxref('fill-opacity')}}
-
-SVG Attribute:
-
-- {{SVGAttr("stroke")}}
-- {{SVGAttr("opacity")}}
-- {{SVGAttr("fill-opacity")}}
-- {{SVGAttr("stop-opacity")}}
+- CSS {{cssxref("stroke-opacity")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/stroke-width/index.md b/files/de/web/svg/attribute/stroke-width/index.md
index 6670408c7..d515130e9 100644
--- a/files/de/web/svg/attribute/stroke-width/index.md
+++ b/files/de/web/svg/attribute/stroke-width/index.md
@@ -2,12 +2,12 @@
 title: stroke-width
 slug: Web/SVG/Attribute/stroke-width
 l10n:
-  sourceCommit: f430d277573ba0b06b1ac33ae8017fd90f170bef
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`stroke-width`** Attribut ist ein Präsentationsattribut, das die Breite des Strichs definiert, der auf die Form angewendet werden soll. Es gilt für jedes SVG-Form- oder Textinhaltselement (siehe {{SVGAttr("stroke-width")}} für eine vollständige Liste), kann jedoch als vererbte Eigenschaft auf Elemente wie {{SVGElement("g")}} angewendet werden und hat dennoch den beabsichtigten Effekt auf Striche nachfolgender Elemente.
+Das **`stroke-width`**-Attribut ist ein Präsentationsattribut, das die Breite des Strichs definiert, der auf die Form angewendet werden soll. Es gilt für jedes SVG-Form- oder Textinhaltselement (siehe {{SVGAttr("stroke-width")}} für eine vollständige Liste), kann aber als geerbtes Attribut auf Elemente wie {{SVGElement("g")}} angewendet werden und hat dennoch die beabsichtigte Wirkung auf die Striche der Nachkommenelemente.
 
 > [!NOTE]
 > Als Präsentationsattribut kann `stroke-width` als CSS-Eigenschaft verwendet werden. Siehe {{cssxref('stroke-width')}} für mehr Informationen.
@@ -51,7 +51,7 @@ svg {
 
 {{EmbedLiveSample("Example", '100%', 150)}}
 
-## Verwendungshinweise
+## Hinweise zur Verwendung
 
 <table class="properties">
   <tbody>
@@ -82,7 +82,7 @@ svg {
 </table>
 
 > [!NOTE]
-> Ein prozentualer Wert wird immer als Prozentsatz der normalisierten Diagonallänge des {{SVGAttr('viewBox')}} berechnet.
+> Ein Prozentwert wird immer als Prozentsatz der normalisierten Diagonallänge des {{SVGAttr('viewBox')}} berechnet.
 
 ## Spezifikationen
 
@@ -91,3 +91,7 @@ svg {
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("stroke-width")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/stroke/index.md b/files/de/web/svg/attribute/stroke/index.md
index 55d23a96b..635c6515e 100644
--- a/files/de/web/svg/attribute/stroke/index.md
+++ b/files/de/web/svg/attribute/stroke/index.md
@@ -2,15 +2,15 @@
 title: stroke
 slug: Web/SVG/Attribute/stroke
 l10n:
-  sourceCommit: 01b8471b84e1d157cbddbb3ffaf560a86b082070
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`stroke`**-Attribut ist ein Präsentationsattribut, das die Farbe (_oder andere SVG-Farbserver wie Verläufe oder Muster_) definiert, die zum Zeichnen der Kontur der Form verwendet wird.
+Das **`stroke`** Attribut ist ein Präsentationsattribut, das die Farbe (_oder alle SVG-Farbserver wie Verlaufs- oder Musterfüllungen_) definiert, mit der die Kontur der Form gemalt wird.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `stroke` auch als CSS-Eigenschaft verwendet werden. Siehe {{cssxref('stroke')}} für mehr Informationen.
+> Als Präsentationsattribut kann `stroke` als CSS-Eigenschaft verwendet werden. Siehe {{cssxref('stroke')}} für mehr Informationen.
 
 Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
@@ -28,7 +28,7 @@ Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 ## Beispiele
 
-### Einfache Farbe und Verlaufsstrich
+### Grundlegender Farb- und Verlaufskontur
 
 ```css hidden
 html,
@@ -55,15 +55,15 @@ svg {
 </svg>
 ```
 
-Das Ergebnis ist wie folgt:
+Die Ausgabe sieht folgendermaßen aus:
 
 {{EmbedLiveSample("Basic color and gradient stroke", '100%', 200)}}
 
 ### `context-stroke` Beispiel
 
-In diesem Beispiel definieren wir drei Formen unter Verwendung von {{SVGElement('path')}}-Elementen, jedes mit einer unterschiedlichen `stroke`- und [`fill`](/de/docs/Web/SVG/Attribute/fill)-Farbe. Wir definieren auch ein {{SVGElement('circle')}}-Element als Marker über das {{SVGElement('marker')}}-Element. Jede Form hat den Marker über die `marker` CSS-Eigenschaft angewendet.
+In diesem Beispiel definieren wir drei Formen mittels {{SVGElement('path')}}-Elementen, jeweils mit einer unterschiedlichen `stroke`- und [`fill`](/de/docs/Web/SVG/Attribute/fill)-Farbe. Wir definieren auch ein {{SVGElement('circle')}}-Element als Marker über das {{SVGElement('marker')}}-Element. Jede Form hat den Marker über die `marker` CSS-Eigenschaft angewendet.
 
-Das {{SVGElement('circle')}} hat `stroke="context-stroke"` und `fill="context-fill"` festgelegt. Da es im Kontext der Formen als Marker gesetzt wird, bewirken diese Attribute, dass es das `fill` und `stroke` erbt, das auf das {{SVGElement('path')}}-Element in jedem Fall gesetzt ist.
+Das {{SVGElement('circle')}}-Element hat `stroke="context-stroke"` und `fill="context-fill"` gesetzt. Da es als Marker im Kontext der Formen gesetzt wird, bewirken diese Attribute, dass es die `fill`- und `stroke`-Werte von dem {{SVGElement('path')}} Element erbt.
 
 ```html-nolint
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
@@ -87,14 +87,14 @@ Das {{SVGElement('circle')}} hat `stroke="context-stroke"` und `fill="context-fi
 </svg>
 ```
 
-Das Ergebnis ist wie folgt:
+Die Ausgabe sieht folgendermaßen aus:
 
 {{EmbedLiveSample("`context-stroke` example", '100%', 220)}}
 
 > [!NOTE]
-> Elemente können auch `context-stroke` und `context-fill` verwenden, um `stroke` und `fill` Werte zu erben, wenn sie durch {{SVGElement('use')}}-Elemente referenziert werden.
+> Elemente können auch `context-stroke` und `context-fill` verwenden, um `stroke`- und `fill`-Werte zu erben, wenn sie durch {{SVGElement('use')}}-Elemente referenziert werden.
 
-## Nutzungshinweise
+## Hinweise zur Verwendung
 
 <table class="properties">
   <tbody>
@@ -126,3 +126,7 @@ Das Ergebnis ist wie folgt:
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("stroke")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/text-decoration/index.md b/files/de/web/svg/attribute/text-decoration/index.md
index 7eb35504f..0d4a0e41a 100644
--- a/files/de/web/svg/attribute/text-decoration/index.md
+++ b/files/de/web/svg/attribute/text-decoration/index.md
@@ -2,21 +2,21 @@
 title: text-decoration
 slug: Web/SVG/Attribute/text-decoration
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`text-decoration`**-Attribut definiert, ob Text mit einer Unterstreichung, Überstreichen und/oder Durchstreichen dekoriert wird. Es ist eine Kurzform für die {{cssxref("text-decoration-line")}} und {{cssxref("text-decoration-style")}} Eigenschaften.
+Das **`text-decoration`** Attribut definiert, ob Text mit einer Unterstreichung, Überstrich und/oder durchgestrichen dekoriert wird. Es ist eine Kurzform für die {{cssxref("text-decoration-line")}} und {{cssxref("text-decoration-style")}} Eigenschaften.
 
-Die Füllung und der Umriss der Textdekoration werden durch die Füllung und den Umriss des Textes an dem Punkt bestimmt, an dem die Textdekoration deklariert wird.
+Die Füllung und der Strich der Textdekoration werden durch die Füllung und den Strich des Textes an dem Punkt bestimmt, an dem die Textdekoration deklariert wird.
 
-Die Reihenfolge der Malung der Textdekoration, also die Füllung und der Umriss, wird durch den Wert des {{SVGAttr("paint-order")}}-Attributs an dem Punkt bestimmt, an dem die Textdekoration deklariert wird.
+Die Farbfolge der Textdekoration, d.h. die Füllung und der Strich, wird durch den Wert des {{SVGAttr("paint-order")}} Attributs an dem Punkt bestimmt, an dem die Textdekoration deklariert wird.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `text-decoration` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS {{cssxref("text-decoration")}}-Eigenschaft.
+> Als Präsentationsattribut kann `text-decoration` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS {{cssxref("text-decoration")}} Eigenschaft.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement("text")}}
 - {{SVGElement("textPath")}}
@@ -42,7 +42,7 @@ svg {
 
 {{EmbedLiveSample("Example", "250", "100")}}
 
-## Verwendungshinweise
+## Nutzungshinweise
 
 <table class="properties">
   <tbody>
@@ -79,7 +79,7 @@ svg {
   </tbody>
 </table>
 
-Für eine Beschreibung der Werte beziehen Sie sich bitte auf die [CSS `text-decoration`](/de/docs/Web/CSS/text-decoration#values) Eigenschaft.
+Eine Beschreibung der Werte finden Sie in der [CSS `text-decoration`](/de/docs/Web/CSS/text-decoration#values) Eigenschaft.
 
 ## Spezifikationen
 
@@ -91,4 +91,4 @@ Für eine Beschreibung der Werte beziehen Sie sich bitte auf die [CSS `text-deco
 
 ## Siehe auch
 
-- {{cssxref("text-decoration")}}
+- CSS {{cssxref("text-decoration")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/text-rendering/index.md b/files/de/web/svg/attribute/text-rendering/index.md
index 051559079..89402134f 100644
--- a/files/de/web/svg/attribute/text-rendering/index.md
+++ b/files/de/web/svg/attribute/text-rendering/index.md
@@ -2,17 +2,17 @@
 title: text-rendering
 slug: Web/SVG/Attribute/text-rendering
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`text-rendering`** Attribut gibt dem Renderer Hinweise darauf, welche Kompromisse beim Rendern von Text eingegangen werden sollen.
+Das **`text-rendering`** Attribut gibt dem Renderer Hinweise darauf, welche Kompromisse beim Rendern von Text gemacht werden sollten.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `text-rendering` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie unter der CSS-Eigenschaft {{cssxref("text-rendering")}}.
+> Als Präsentationsattribut kann `text-rendering` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS {{cssxref("text-rendering")}} Eigenschaft.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement("text")}}
 
@@ -58,13 +58,13 @@ svg {
 </table>
 
 - `auto`
-  - : Dieser Wert gibt an, dass der Benutzeragent geeignete Kompromisse zwischen Geschwindigkeit, Lesbarkeit und geometrischer Präzision eingehen soll, wobei der Lesbarkeit eine höhere Wichtigkeit beigemessen wird als der Geschwindigkeit und der geometrischen Präzision.
+  - : Dieser Wert gibt an, dass der Benutzeragent geeignete Kompromisse machen soll, um eine Balance zwischen Geschwindigkeit, Lesbarkeit und geometrischer Präzision zu finden, wobei der Lesbarkeit mehr Bedeutung beigemessen wird als der Geschwindigkeit und der geometrischen Präzision.
 - `optimizeSpeed`
-  - : Dieser Wert gibt an, dass der Benutzeragent die Rendergeschwindigkeit über Lesbarkeit und geometrische Präzision stellen soll. Diese Option wird in manchen Fällen dazu führen, dass einige Benutzeragenten die Text-Anti-Aliasing-Funktion ausschalten.
+  - : Dieser Wert gibt an, dass der Benutzeragent die Rendergeschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision betonen soll. Diese Option wird manchmal einige Benutzeragenten dazu veranlassen, die Text-Anti-Aliasing abzuschalten.
 - `optimizeLegibility`
-  - : Dieser Wert gibt an, dass der Benutzeragent die Lesbarkeit über Rendergeschwindigkeit und geometrische Präzision priorisieren soll. Der Benutzeragent entscheidet oft, ob Anti-Aliasing-Techniken, eingebaute Schriftartenhinweise oder beides angewendet werden, um den lesbarsten Text zu erzeugen.
+  - : Dieser Wert gibt an, dass der Benutzeragent die Lesbarkeit gegenüber Rendergeschwindigkeit und geometrischer Präzision betonen soll. Der Benutzeragent wird häufig entscheiden, ob Anti-Aliasing-Techniken, eingebaute Font-Hinweise oder beides angewendet werden, um den lesbarsten Text zu erzeugen.
 - `geometricPrecision`
-  - : Dieser Wert gibt an, dass der Benutzeragent die geometrische Präzision über Lesbarkeit und Rendergeschwindigkeit betonen soll. Diese Option führt in der Regel dazu, dass der Benutzeragent auf die Verwendung von Hinting verzichtet, sodass {{Glossary("glyph", "Glyphe")}}-Umrisse mit vergleichbarer geometrischer Präzision zum Rendern von Pfaddaten gezeichnet werden.
+  - : Dieser Wert gibt an, dass der Benutzeragent die geometrische Präzision gegenüber Lesbarkeit und Rendergeschwindigkeit betonen soll. Diese Option führt in der Regel dazu, dass der Benutzeragent die Verwendung von Hinweisen aussetzt, sodass {{Glossary("glyph", "Glyphen")}}-Umrisse mit vergleichbarer geometrischer Präzision zum Rendern der Pfaddaten gezeichnet werden.
 
 ## Spezifikationen
 
@@ -76,4 +76,4 @@ svg {
 
 ## Siehe auch
 
-- {{cssxref("text-rendering")}}
+- CSS {{cssxref("text-rendering")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/transform-origin/index.md b/files/de/web/svg/attribute/transform-origin/index.md
index bafc1b2a8..26862f80a 100644
--- a/files/de/web/svg/attribute/transform-origin/index.md
+++ b/files/de/web/svg/attribute/transform-origin/index.md
@@ -2,19 +2,19 @@
 title: transform-origin
 slug: Web/SVG/Attribute/transform-origin
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef()}}
 
-Das **`transform-origin`** SVG-Attribut legt den Ursprung für die Transformationen eines Elements fest.
+Das SVG-Attribut **`transform-origin`** legt den Ursprung für die Transformationen eines Elements fest.
 
 Sie können dieses Attribut mit jedem SVG-Element verwenden.
 
 > [!NOTE]
-> Als Präsentationsattribut in SVG entspricht `transform-origin` im Syntax und Verhalten der CSS-Eigenschaft `transform-origin` und kann als CSS-Eigenschaft zur Gestaltung von SVG verwendet werden. Weitere Informationen finden Sie in der [CSS transform-origin](/de/docs/Web/CSS/transform-origin) Eigenschaft.
+> Als Präsentationsattribut in SVG entspricht `transform-origin` in Syntax und Verhalten der CSS-Eigenschaft `transform-origin` und kann als CSS-Eigenschaft verwendet werden, um SVG zu stylen. Weitere Informationen finden Sie unter der CSS-Eigenschaft [transform-origin](/de/docs/Web/CSS/transform-origin).
 
-## Hinweise zur Verwendung
+## Nutzungshinweise
 
 <table class="properties">
   <tbody>
@@ -34,27 +34,27 @@ Sie können dieses Attribut mit jedem SVG-Element verwenden.
 </table>
 
 > [!NOTE]
-> Der Standardwert von `transform-origin` ist `0 0` für alle SVG-Elemente, außer für Wurzel-`<svg>`-Elemente und `<svg>`-Elemente, die ein direktes Kind eines [foreignObject](/de/docs/Web/SVG/Element/foreignObject) sind und deren transform-origin `50% 50%` beträgt, wie bei anderen CSS-Elementen.
+> Der Standardwert von `transform-origin` ist `0 0` für alle SVG-Elemente, außer für Wurzel-`<svg>`-Elemente und `<svg>`-Elemente, die ein direktes Kind eines [foreignObject](/de/docs/Web/SVG/Element/foreignObject) sind und deren Transformationsursprung `50% 50%` ist, wie bei anderen CSS-Elementen.
 
 Die `transform-origin`-Eigenschaft kann mit einem, zwei oder drei Werten angegeben werden, wobei jeder Wert einen Versatz darstellt. Nicht explizit definierte Versätze werden auf ihre entsprechenden [Anfangswerte](/de/docs/Web/CSS/initial_value) zurückgesetzt.
 
-Wenn ein einzelner {{cssxref("&lt;length&gt;")}} oder {{cssxref("&lt;percentage&gt;")}} Wert definiert ist, stellt er den horizontalen Versatz dar.
+Wenn ein einzelner {{cssxref("&lt;length&gt;")}}- oder {{cssxref("&lt;percentage&gt;")}}-Wert definiert ist, stellt er den horizontalen Versatz dar.
 
-Wenn zwei oder mehr Werte definiert sind und entweder kein Wert ein Schlüsselwort ist oder das einzige verwendete Schlüsselwort `center` ist, dann repräsentiert der erste Wert den horizontalen Versatz und der zweite den vertikalen Versatz.
+Wenn zwei oder mehr Werte definiert sind und entweder kein Wert ein Schlüsselwort ist oder das einzige verwendete Schlüsselwort `center` ist, dann stellt der erste Wert den horizontalen Versatz dar und der zweite den vertikalen Versatz.
 
-- Einwert-Syntax:
+- Ein-Wert-Syntax:
 
-  - Der Wert muss eine {{cssxref("length")}} oder eines der Schlüsselwörter `left`, `center`, `right`, `top` und `bottom` sein.
+  - Der Wert muss eine {{cssxref("length")}}, oder eines der Schlüsselwörter `left`, `center`, `right`, `top` und `bottom` sein.
 
-- Zweiwert-Syntax:
+- Zwei-Wert-Syntax:
 
-  - Ein Wert muss eine {{cssxref("length")}}, ein {{cssxref("percentage")}} oder eines der Schlüsselwörter `left`, `center` und `right` sein.
-  - Der andere Wert muss eine {{cssxref("length")}}, ein {{cssxref("percentage")}} oder eines der Schlüsselwörter `top`, `center` und `bottom` sein.
+  - Ein Wert muss eine {{cssxref("length")}}, ein {{cssxref("percentage")}}, oder eines der Schlüsselwörter `left`, `center` und `right` sein.
+  - Der andere Wert muss eine {{cssxref("length")}}, ein {{cssxref("percentage")}}, oder eines der Schlüsselwörter `top`, `center` und `bottom` sein.
 
-- Dreiwert-Syntax:
+- Drei-Wert-Syntax:
 
-  - Die ersten beiden Werte sind dieselben wie bei der Zweiwert-Syntax.
-  - Der dritte Wert muss eine {{cssxref("length")}} sein. Er repräsentiert immer den Z-Versatz.
+  - Die ersten beiden Werte sind wie bei der Zwei-Wert-Syntax.
+  - Der dritte Wert muss eine {{cssxref("length")}} sein. Er stellt immer den Z-Versatz dar.
 
 ## Beispiel
 
@@ -62,13 +62,13 @@ Dieses Beispiel zeigt den Code für ein PNG-Bild und drei SVG-Bilder:
 
 1. Ein PNG-Referenzbild.
 2. Ein SVG-Referenzbild, das keine Transformation verwendet.
-3. Ein SVG-Bild, das `transform-origin` zur Transformation verwendet, wobei das erwartete Ergebnis ein Bild ist, das mit dem Referenzbild identisch ist.
-4. Ein SVG-Bild, das nicht `transform-origin`, sondern nur [`transform`](/de/docs/Web/SVG/Attribute/transform) zur Transformation verwendet, mit dem erwarteten Ergebnis eines Bildes, das dem Referenzbild identisch ist.
+3. Ein SVG-Bild, das `transform-origin` verwendet, um eine Transformation durchzuführen, wobei das erwartete Ergebnis ein Bild ist, das identisch mit dem Referenzbild ist.
+4. Ein SVG-Bild, das `transform-origin` nicht verwendet, aber dieselbe Transformation nur mit [`transform`](/de/docs/Web/SVG/Attribute/transform) durchführt, wobei das erwartete Ergebnis ein Bild ist, das identisch mit dem Referenzbild ist.
 
-Das vierte Bild zeigt, wie die Transformation in Browsern durchgeführt werden kann, die `transform-origin` nicht unterstützen — da der Code für das vierte Bild dieselbe Transformation wie der `transform-origin`-basierte Code des dritten Bildes durchführt, jedoch nur mithilfe von `transform` und ohne `transform-origin`.
+Das vierte Bild zeigt, wie die Transformation in Browsern durchgeführt werden kann, die `transform-origin` nicht unterstützen — denn der Code für das vierte Bild führt dieselbe Transformation durch wie der `transform-origin`-basierte Code des dritten Bildes, jedoch nur mit `transform`, ohne `transform-origin`.
 
 > [!NOTE]
-> Diese Beispiele verwenden eine modifizierte Version eines Code-Snippets in einer Stack Overflow [Frage](https://stackoverflow.com/questions/67057190/safari-doesnt-respect-transform-origin-svg-attribute) von [Maxim Kulikov](https://stackoverflow.com/users/1033939/maxim-kulikov) sowie eine modifizierte Version eines Code-Snippets in einer [Antwort](https://stackoverflow.com/questions/67057190/safari-doesnt-respect-transform-origin-svg-attribute/67057754) von [Michael Mullany](https://stackoverflow.com/users/271353/michael-mullany), die die Frage begleitet. Beide Code-Snippets werden unter den Bedingungen der [CC BY-SA](https://creativecommons.org/licenses/by-sa/4.0/) Lizenz verwendet.)
+> Diese Beispiele verwenden eine modifizierte Version eines Code-Snippets in einer Stack Overflow-[Frage](https://stackoverflow.com/questions/67057190/safari-doesnt-respect-transform-origin-svg-attribute) von [Maxim Kulikov](https://stackoverflow.com/users/1033939/maxim-kulikov), sowie eine modifizierte Version eines Code-Snippets in einer [Antwort](https://stackoverflow.com/questions/67057190/safari-doesnt-respect-transform-origin-svg-attribute/67057754) von [Michael Mullany](https://stackoverflow.com/users/271353/michael-mullany), die die Frage begleitet. Beide Code-Snippets werden unter den Bedingungen der [CC BY-SA](https://creativecommons.org/licenses/by-sa/4.0/) Lizenz verwendet.)
 
 ### HTML
 
@@ -324,3 +324,7 @@ figcaption {
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("transform-origin")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/transform/index.md b/files/de/web/svg/attribute/transform/index.md
index b17e60a14..32bdb4fdf 100644
--- a/files/de/web/svg/attribute/transform/index.md
+++ b/files/de/web/svg/attribute/transform/index.md
@@ -2,15 +2,15 @@
 title: transform
 slug: Web/SVG/Attribute/transform
 l10n:
-  sourceCommit: bea339d321513fc6d66d95c8f0305b9387fa57bb
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`transform`**-Attribut definiert eine Liste von Transformationsdefinitionen, die auf ein Element und dessen Kinder angewendet werden.
+Das **`transform`** Attribut definiert eine Liste von Transformationsdefinitionen, die auf ein Element und dessen Kinder angewendet werden.
 
 > [!NOTE]
-> Seit SVG2 ist `transform` ein Präsentationsattribut, was bedeutet, dass es als CSS-Eigenschaft verwendet werden kann. Beachten Sie jedoch, dass es einige Unterschiede in der Syntax zwischen der CSS-Eigenschaft und dem Attribut gibt. Siehe die Dokumentation zur CSS-Eigenschaft {{cssxref('transform')}} für die spezifische Syntax in diesem Fall.
+> Ab SVG2 ist `transform` ein Präsentationsattribut, was bedeutet, dass es als CSS-Eigenschaft verwendet werden kann. Beachten Sie jedoch, dass es einige Unterschiede in der Syntax zwischen der CSS-Eigenschaft und dem Attribut gibt. Siehe die Dokumentation zur CSS-Eigenschaft {{cssxref('transform')}} für die spezifische Syntax, die in diesem Fall zu verwenden ist.
 
 Sie können dieses Attribut mit jedem SVG-Element verwenden.
 
@@ -46,9 +46,9 @@ svg {
 
 {{EmbedLiveSample("Example", '100%', 200)}}
 
-In SVG 1.1 durften es nur diese 16 Elemente verwenden: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}} und {{SVGElement('use')}}.
+In SVG 1.1 durften nur diese 16 Elemente es verwenden: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}}, und {{SVGElement('use')}}.
 
-Auch als Überbleibsel aus SVG 1.1 unterstützen {{SVGElement('linearGradient')}} und {{SVGElement('radialGradient')}} das `gradientTransform`-Attribut, und {{SVGElement('pattern')}} unterstützt das `patternTransform`-Attribut, die beide genau wie das `transform`-Attribut wirken.
+Außerdem, als Erbe von SVG 1.1, unterstützen {{SVGElement('linearGradient')}} und {{SVGElement('radialGradient')}} das Attribut `gradientTransform`, und {{SVGElement('pattern')}} unterstützt das Attribut `patternTransform`, die beide genauso wie das `transform` Attribut wirken.
 
 <table class="properties">
   <tbody>
@@ -75,14 +75,14 @@ Auch als Überbleibsel aus SVG 1.1 unterstützen {{SVGElement('linearGradient')}
 
 ## Transformationsfunktionen
 
-Die folgenden Transformationsfunktionen können durch das `transform`-Attribut `<transform-list>` verwendet werden
+Die folgenden Transformationsfunktionen können vom `transform` Attribut `<transform-list>` verwendet werden.
 
 > [!WARNING]
-> Laut Spezifikation sollten Sie auch CSS [transform functions](/de/docs/Web/CSS/transform-function) verwenden können. Die Kompatibilität ist jedoch nicht garantiert.
+> Laut Spezifikation sollten Sie auch CSS [transform functions](/de/docs/Web/CSS/transform-function) verwenden können. Allerdings ist die Kompatibilität nicht garantiert.
 
 ### Matrix
 
-Die `matrix(<a> <b> <c> <d> <e> <f>)`-Transformationsfunktion spezifiziert eine Transformation in Form einer Transformationsmatrix mit sechs Werten. `matrix(a,b,c,d,e,f)` entspricht der Anwendung der Transformationsmatrix:
+Die `matrix(<a> <b> <c> <d> <e> <f>)` Transformationsfunktion spezifiziert eine Transformation in Form einer Transformationsmatrix mit sechs Werten. `matrix(a,b,c,d,e,f)` entspricht der Anwendung der Transformationsmatrix:
 
 <!-- prettier-ignore-start -->
 <math display="block">
@@ -90,7 +90,7 @@ Die `matrix(<a> <b> <c> <d> <e> <f>)`-Transformationsfunktion spezifiziert eine
 </math>
 <!-- prettier-ignore-end -->
 
-Dies transformiert Koordinaten von einem vorherigen Koordinatensystem in ein neues Koordinatensystem durch die folgenden Matrixgleichungen:
+Diese transformiert Koordinaten von einem vorherigen Koordinatensystem in ein neues Koordinatensystem anhand der folgenden Matrixgleichungen:
 
 <!-- prettier-ignore-start -->
 <math display="block">
@@ -150,7 +150,7 @@ svg {
 
 ### Translate
 
-Die `translate(<x> [<y>])`-Transformationsfunktion bewegt das Objekt um `x` und `y`. Wenn `y` nicht angegeben ist, wird es als `0` angenommen.
+Die `translate(<x> [<y>])` Transformationsfunktion verschiebt das Objekt um `x` und `y`. Wenn `y` nicht angegeben wird, wird es als `0` angenommen.
 
 Mit anderen Worten:
 
@@ -207,7 +207,7 @@ svg {
 
 ### Scale
 
-Die `scale(<x> [<y>])`-Transformationsfunktion spezifiziert eine Skalierungsoperation um `x` und `y`. Wenn `y` nicht angegeben ist, wird angenommen, dass es `x` entspricht.
+Die `scale(<x> [<y>])` Transformationsfunktion spezifiziert eine Skalierung durch `x` und `y`. Wenn `y` nicht angegeben wird, wird angenommen, dass es gleich `x` ist.
 
 #### Beispiel
 
@@ -239,7 +239,7 @@ svg {
 
 ### Rotate
 
-Die `rotate(<a> [<x> <y>])`-Transformationsfunktion spezifiziert eine Rotation um `a` Grad um einen gegebenen Punkt. Wenn die optionalen Parameter `x` und `y` nicht angegeben sind, erfolgt die Rotation um den Ursprung des aktuellen Benutzerskoordinatensystems. Wenn die optionalen Parameter `x` und `y` angegeben sind, erfolgt die Rotation um den Punkt `(x, y)`.
+Die `rotate(<a> [<x> <y>])` Transformationsfunktion spezifiziert eine Rotation um `a` Grad um einen bestimmten Punkt. Wenn die optionalen Parameter `x` und `y` nicht angegeben sind, erfolgt die Rotation um den Ursprung des aktuellen Benutzerkoordinatensystems. Wenn die optionalen Parameter `x` und `y` angegeben sind, erfolgt die Rotation um den Punkt `(x, y)`.
 
 #### Beispiel
 
@@ -273,7 +273,7 @@ svg {
 
 ### SkewX
 
-Die `skewX(<a>)`-Transformationsfunktion spezifiziert eine Schertransformation entlang der x-Achse um `a` Grad.
+Die `skewX(<a>)` Transformationsfunktion spezifiziert eine Schertransformation entlang der x-Achse um `a` Grad.
 
 #### Beispiel
 
@@ -297,7 +297,7 @@ svg {
 
 ### SkewY
 
-Die `skewY(<a>)`-Transformationsfunktion spezifiziert eine Schertransformation entlang der y-Achse um `a` Grad.
+Die `skewY(<a>)` Transformationsfunktion spezifiziert eine Schertransformation entlang der y-Achse um `a` Grad.
 
 #### Beispiel
 
@@ -322,3 +322,7 @@ svg {
 ## Spezifikationen
 
 {{Specifications}}
+
+## Siehe auch
+
+- CSS {{cssxref("transform")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/unicode-bidi/index.md b/files/de/web/svg/attribute/unicode-bidi/index.md
index a65624b96..c7694deee 100644
--- a/files/de/web/svg/attribute/unicode-bidi/index.md
+++ b/files/de/web/svg/attribute/unicode-bidi/index.md
@@ -2,15 +2,15 @@
 title: unicode-bidi
 slug: Web/SVG/Attribute/unicode-bidi
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das Attribut **`unicode-bidi`** legt fest, wie die Anhäufung des Hintergrundbildes verwaltet wird.
+Das Attribut **`unicode-bidi`** legt fest, wie die Akkumulation des Hintergrundbildes verwaltet wird.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `unicode-bidi` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der [CSS `unicode-bidi`](/de/docs/Web/CSS/unicode-bidi) Eigenschaft.
+> Als Präsentationsattribut kann `unicode-bidi` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der [CSS `unicode-bidi`](/de/docs/Web/CSS/unicode-bidi)-Eigenschaft.
 
 ## Elemente
 
@@ -40,7 +40,7 @@ Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
   </tbody>
 </table>
 
-Für eine Beschreibung der Werte siehe die CSS {{cssxref("unicode-bidi")}} Eigenschaft.
+Für eine Beschreibung der Werte lesen Sie bitte die CSS-Eigenschaft {{cssxref("unicode-bidi")}}.
 
 ## Spezifikationen
 
@@ -49,3 +49,7 @@ Für eine Beschreibung der Werte siehe die CSS {{cssxref("unicode-bidi")}} Eigen
 ## Browser-Kompatibilität
 
 {{Compat}}
+
+## Siehe auch
+
+- CSS {{cssxref("unicode-bidi")}}-Eigenschaft
diff --git a/files/de/web/svg/attribute/v-alphabetic/index.md b/files/de/web/svg/attribute/v-alphabetic/index.md
index 2b7520604..c78f0d830 100644
--- a/files/de/web/svg/attribute/v-alphabetic/index.md
+++ b/files/de/web/svg/attribute/v-alphabetic/index.md
@@ -2,18 +2,18 @@
 title: v-alphabetic
 slug: Web/SVG/Attribute/v-alphabetic
 l10n:
-  sourceCommit: 8799df4d0dbc74bdcf0de1e7a24563a46dcb2478
+  sourceCommit: 0a4d5b451cc54599ed2b99cef4fdd39c3fd96a3d
 ---
 
 {{SVGRef}}{{Deprecated_Header}}
 
-Das **`v-alphabetic`** Attribut definiert die Ausrichtungskoordinate für {{Glossary("glyph", "Glyphen")}}, um eine alphabetische Baseline-Ausrichtung zu erreichen. Der Wert ist ein Offset im Schriftkoordinatensystem relativ zum glyphe-spezifischen {{SVGAttr("vert-origin-x")}} Attribut.
+Das **`v-alphabetic`** Attribut bestimmt die Ausrichtungskoordinate für {{Glossary("glyph", "Glyphen")}}, um eine {{Glossary("/Baseline/Typography", "alphabetische Grundlinie")}}-Ausrichtung zu erreichen. Der Wert ist ein Versatz im Schriftkoordinatensystem relativ zum glyphen-spezifischen {{SVGAttr("vert-origin-x")}} Attribut.
 
-Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
+Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 - {{SVGElement("font-face")}}
 
-## Nutzungshinweise
+## Hinweise zur Verwendung
 
 <table class="properties">
   <tbody>
diff --git a/files/de/web/svg/attribute/visibility/index.md b/files/de/web/svg/attribute/visibility/index.md
index ebbcaa9ea..092bb54ac 100644
--- a/files/de/web/svg/attribute/visibility/index.md
+++ b/files/de/web/svg/attribute/visibility/index.md
@@ -2,20 +2,20 @@
 title: visibility
 slug: Web/SVG/Attribute/visibility
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`visibility`**-Attribut ermöglicht es Ihnen, die Sichtbarkeit von grafischen Elementen zu steuern. Mit einem Wert von `hidden` oder `collapse` wird das aktuelle Grafikelement unsichtbar.
+Das Attribut **`visibility`** ermöglicht Ihnen die Kontrolle über die Sichtbarkeit von grafischen Elementen. Mit einem Wert von `hidden` oder `collapse` wird das aktuelle Grafikelement unsichtbar.
 
 > [!NOTE]
-> Wenn das `visibility`-Attribut auf einem Textelement auf `hidden` gesetzt ist, ist der Text unsichtbar, nimmt aber dennoch Platz in den Textlayout-Berechnungen ein.
+> Wenn das `visibility`-Attribut auf einem Textelement auf `hidden` gesetzt ist, wird der Text unsichtbar, nimmt aber weiterhin Platz in den Textlayout-Berechnungen ein.
 
-Je nach Wert des Attributs {{SVGAttr("pointer-events")}} können Grafikelemente, deren `visibility`-Attribut auf `hidden` gesetzt ist, dennoch Ereignisse empfangen.
+Abhängig vom Wert des Attributs {{SVGAttr("pointer-events")}} können grafische Elemente, die ihr `visibility`-Attribut auf `hidden` gesetzt haben, weiterhin Ereignisse empfangen.
 
 > [!NOTE]
-> Als Präsentationsattribut kann `visibility` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie unter der CSS-Eigenschaft {{cssxref("visibility")}}.
+> Als Präsentationsattribut kann `visibility` als CSS-Eigenschaft verwendet werden. Siehe die CSS-Eigenschaft {{cssxref("visibility")}} für weitere Informationen.
 
 ## Elemente
 
@@ -40,7 +40,7 @@ Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 - {{SVGElement("tspan")}}
 - `<video>`
 
-## Anwendungsnotizen
+## Verwendungshinweise
 
 <table class="properties">
   <tbody>
@@ -62,11 +62,11 @@ Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 </table>
 
 - `visible`
-  - : Dieser Wert zeigt an, dass das Element gezeichnet wird.
+  - : Dieser Wert gibt an, dass das Element gezeichnet wird.
 - `hidden`
-  - : Dieser Wert zeigt an, dass das Element nicht gezeichnet wird. Es ist jedoch weiterhin Teil des Rendering-Baums, d.h., es kann Zeigerereignisse empfangen, je nach Attribut {{SVGAttr("pointer-events")}}, Fokus empfangen, je nach Attribut {{SVGAttr("tabindex")}}, trägt zu Berechnungen der Begrenzungsrahmen und Clipping-Pfade bei und beeinflusst das Textlayout.
+  - : Dieser Wert gibt an, dass das Element nicht gezeichnet wird. Es ist jedoch weiterhin Teil des Rendering-Baums, d. h., es kann Zeigereignisse je nach Attribut {{SVGAttr("pointer-events")}} empfangen, je nach Attribut {{SVGAttr("tabindex")}} den Fokus erhalten, trägt zur Berechnung der Begrenzungsrahmen und der Clipping-Pfade bei und beeinflusst das Textlayout.
 - `collapse`
-  - : Dieser Wert entspricht `hidden`.
+  - : Dieser Wert ist gleich `hidden`.
 
 ## Beispiele
 
@@ -101,7 +101,7 @@ svg {
 
 ### Beispiel 2
 
-Das folgende Beispiel schaltet die CSS-`visibility` des SVG-Bildpfades um.
+Das folgende Beispiel wechselt die CSS-`visibility` des SVG-Bildpfads um.
 
 #### HTML
 
@@ -169,4 +169,4 @@ button.addEventListener("click", (evt) => {
 ## Siehe auch
 
 - {{SVGAttr("display")}}-Attribut
-- {{cssxref("visibility")}}
+- CSS {{cssxref("visibility")}}-Eigenschaft
diff --git a/files/de/web/svg/attribute/width/index.md b/files/de/web/svg/attribute/width/index.md
index ccb3f50ed..d8334ed7c 100644
--- a/files/de/web/svg/attribute/width/index.md
+++ b/files/de/web/svg/attribute/width/index.md
@@ -2,7 +2,7 @@
 title: width
 slug: Web/SVG/Attribute/width
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
@@ -11,11 +11,11 @@ Das **`width`** Attribut definiert die horizontale Länge eines Elements im Benu
 
 ## Elemente
 
-Sie können dieses Attribut mit den in den folgenden Abschnitten beschriebenen SVG-Elementen verwenden.
+Sie können dieses Attribut mit den im Folgenden beschriebenen SVG-Elementen verwenden.
 
 ### `<feBlend>`
 
-Für {{SVGElement('feBlend')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feBlend')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -41,14 +41,14 @@ Für {{SVGElement('feBlend')}} definiert `width` die horizontale Länge des Dars
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feColorMatrix>`
 
-Für {{SVGElement('feColorMatrix')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feColorMatrix')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -74,14 +74,14 @@ Für {{SVGElement('feColorMatrix')}} definiert `width` die horizontale Länge de
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feComponentTransfer>`
 
-Für {{SVGElement('feComponentTransfer')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feComponentTransfer')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -107,14 +107,14 @@ Für {{SVGElement('feComponentTransfer')}} definiert `width` die horizontale Lä
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feComposite>`
 
-Für {{SVGElement('feComposite')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feComposite')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -140,14 +140,14 @@ Für {{SVGElement('feComposite')}} definiert `width` die horizontale Länge des
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feConvolveMatrix>`
 
-Für {{SVGElement('feConvolveMatrix')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feConvolveMatrix')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -173,14 +173,14 @@ Für {{SVGElement('feConvolveMatrix')}} definiert `width` die horizontale Länge
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feDiffuseLighting>`
 
-Für {{SVGElement('feDiffuseLighting')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feDiffuseLighting')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -206,14 +206,14 @@ Für {{SVGElement('feDiffuseLighting')}} definiert `width` die horizontale Läng
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feDisplacementMap>`
 
-Für {{SVGElement('feDisplacementMap')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feDisplacementMap')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -239,14 +239,14 @@ Für {{SVGElement('feDisplacementMap')}} definiert `width` die horizontale Läng
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feDropShadow>`
 
-Für {{SVGElement('feDropShadow')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feDropShadow')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -272,14 +272,14 @@ Für {{SVGElement('feDropShadow')}} definiert `width` die horizontale Länge des
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feFlood>`
 
-Für {{SVGElement('feFlood')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feFlood')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -305,14 +305,14 @@ Für {{SVGElement('feFlood')}} definiert `width` die horizontale Länge des Dars
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feGaussianBlur>`
 
-Für {{SVGElement('feGaussianBlur')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feGaussianBlur')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -338,14 +338,14 @@ Für {{SVGElement('feGaussianBlur')}} definiert `width` die horizontale Länge d
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feImage>`
 
-Für {{SVGElement('feImage')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feImage')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -371,14 +371,14 @@ Für {{SVGElement('feImage')}} definiert `width` die horizontale Länge des Dars
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feMerge>`
 
-Für {{SVGElement('feMerge')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feMerge')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -404,14 +404,14 @@ Für {{SVGElement('feMerge')}} definiert `width` die horizontale Länge des Dars
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feMorphology>`
 
-Für {{SVGElement('feMorphology')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feMorphology')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -437,14 +437,14 @@ Für {{SVGElement('feMorphology')}} definiert `width` die horizontale Länge des
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feOffset>`
 
-Für {{SVGElement('feOffset')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feOffset')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -470,14 +470,14 @@ Für {{SVGElement('feOffset')}} definiert `width` die horizontale Länge des Dar
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feSpecularLighting>`
 
-Für {{SVGElement('feSpecularLighting')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feSpecularLighting')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -503,14 +503,14 @@ Für {{SVGElement('feSpecularLighting')}} definiert `width` die horizontale Län
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feTile>`
 
-Für {{SVGElement('feTile')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feTile')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -536,14 +536,14 @@ Für {{SVGElement('feTile')}} definiert `width` die horizontale Länge des Darst
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<feTurbulence>`
 
-Für {{SVGElement('feTurbulence')}} definiert `width` die horizontale Länge des Darstellungsbereichs der Primitiven.
+Für {{SVGElement('feTurbulence')}} definiert `width` die horizontale Länge des Renderbereichs des Primitives.
 
 <table class="properties">
   <tbody>
@@ -569,14 +569,14 @@ Für {{SVGElement('feTurbulence')}} definiert `width` die horizontale Länge des
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<filter>`
 
-Für {{SVGElement('filter')}} definiert `width` die horizontale Länge des Darstellungsbereichs des Filters.
+Für {{SVGElement('filter')}} definiert `width` die horizontale Länge des Renderbereichs des Filters.
 
 <table class="properties">
   <tbody>
@@ -602,14 +602,14 @@ Für {{SVGElement('filter')}} definiert `width` die horizontale Länge des Darst
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<foreignObject>`
 
-Für {{SVGElement('foreignObject')}} definiert `width` die horizontale Länge des Darstellungsbereichs des referenzierten Dokuments.
+Für {{SVGElement('foreignObject')}} definiert `width` die horizontale Länge des Renderbereichs für das referenzierte Dokument.
 
 <table class="properties">
   <tbody>
@@ -636,13 +636,13 @@ Für {{SVGElement('foreignObject')}} definiert `width` die horizontale Länge de
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 > [!NOTE]
-> Ab SVG2 ist `width` eine _Geometrieeigenschaft_, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für `<foreignObject>` verwendet werden kann.
+> Ab SVG2 ist `width` eine _Geometreigenschafft_, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für `<foreignObject>` verwendet werden kann.
 
 ### `<image>`
 
@@ -673,17 +673,17 @@ Für {{SVGElement('image')}} definiert `width` die horizontale Länge des Bildes
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 > [!NOTE]
-> Ab SVG2 ist `width` eine _Geometrieeigenschaft_, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für Bilder verwendet werden kann.
+> Ab SVG2 ist `width` eine _Geometreigenschafft_, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für Bilder verwendet werden kann.
 
 ### `<mask>`
 
-Für {{SVGElement('mask')}} definiert `width` die horizontale Länge seines Wirkungsbereichs. Der genaue Effekt dieses Attributs wird durch das {{SVGAttr('maskUnits')}} Attribut beeinflusst.
+Für {{SVGElement('mask')}} definiert `width` die horizontale Länge des Wirkungsbereichs. Der genaue Effekt dieses Attributs wird vom {{SVGAttr('maskUnits')}} Attribut beeinflusst.
 
 <table class="properties">
   <tbody>
@@ -709,14 +709,14 @@ Für {{SVGElement('mask')}} definiert `width` die horizontale Länge seines Wirk
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<pattern>`
 
-Für {{SVGElement('pattern')}} definiert `width` die horizontale Länge des Kachelmusters. Der genaue Effekt dieses Attributs wird durch die Attribute {{SVGAttr('patternUnits')}} und {{SVGAttr('patternTransform')}} beeinflusst.
+Für {{SVGElement('pattern')}} definiert `width` die horizontale Länge des Kachelmusters. Der genaue Effekt dieses Attributs wird von den Attributen {{SVGAttr('patternUnits')}} und {{SVGAttr('patternTransform')}} beeinflusst.
 
 <table class="properties">
   <tbody>
@@ -736,14 +736,14 @@ Für {{SVGElement('pattern')}} definiert `width` die horizontale Länge des Kach
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 ### `<rect>`
 
-Für {{SVGElement('rect')}} definiert `width` die horizontale Länge des Rechtecks.
+Für {{SVGElement('rect')}} definiert `width` die horizontale Länge für das Rechteck.
 
 <table class="properties">
   <tbody>
@@ -770,20 +770,20 @@ Für {{SVGElement('rect')}} definiert `width` die horizontale Länge des Rechtec
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 > [!NOTE]
-> Ab SVG2 ist `width` eine _Geometrieeigenschaft_, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für Rechtecke verwendet werden kann.
+> Ab SVG2 ist `width` eine _Geometreigenschafft_, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für Rechtecke verwendet werden kann.
 
 ### `<svg>`
 
-Für {{SVGElement('svg')}} definiert `width` die horizontale Länge des Darstellungsbereichs des SVG-Viewports.
+Für {{SVGElement('svg')}} definiert `width` die horizontale Länge für den Renderbereich des SVG-Viewports.
 
 > [!NOTE]
-> In einem HTML-Dokument, wenn sowohl das {{SVGAttr('viewBox')}} als auch das `width`-Attribut weggelassen werden, [wird das svg-Element mit einer Breite von `300px` dargestellt](https://svgwg.org/specs/integration/#svg-css-sizing)
+> In einem HTML-Dokument, wenn sowohl das {{SVGAttr('viewBox')}} als auch das `width`-Attribut weggelassen werden, [wird das SVG-Element mit einer Breite von `300px` gerendert](https://svgwg.org/specs/integration/#svg-css-sizing)
 
 <table class="properties">
   <tbody>
@@ -810,17 +810,17 @@ Für {{SVGElement('svg')}} definiert `width` die horizontale Länge des Darstell
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
 > [!NOTE]
-> Ab SVG2 ist `width` eine _Geometrieeigenschaft_, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für `<svg>` verwendet werden kann.
+> Ab SVG2 ist `width` eine _Geometreigenschafft_, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für `<svg>` verwendet werden kann.
 
 ### `<use>`
 
-Für {{SVGElement('use')}} definiert `width` die horizontale Länge des referenzierten Elements.
+Für {{SVGElement('use')}} definiert `width` die horizontale Länge für das referenzierte Element.
 
 <table class="properties">
   <tbody>
@@ -847,15 +847,15 @@ Für {{SVGElement('use')}} definiert `width` die horizontale Länge des referenz
     </tr>
     <tr>
       <th scope="row">Animierbar</th>
-      <td>Ja</td>
+      <td>Yes</td>
     </tr>
   </tbody>
 </table>
 
-> **Hinweis:** `width` hat keinen Effekt auf `use`-Elemente, außer das referenzierte Element hat ein [viewBox](/de/docs/Web/SVG/Attribute/viewBox) - d. h. sie haben nur dann eine Wirkung, wenn `use` auf ein `svg`- oder `symbol`-Element verweist.
+> **Hinweis:** `width` hat keine Wirkung auf `use`-Elemente, es sei denn, das referenzierte Element hat eine [viewBox](/de/docs/Web/SVG/Attribute/viewBox) - das heißt, sie haben nur dann eine Wirkung, wenn `use` sich auf ein `svg` oder `symbol`-Element bezieht.
 
 > [!NOTE]
-> Ab SVG2 ist `width` eine _Geometrieeigenschaft_, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für verwendete Elemente verwendet werden kann.
+> Ab SVG2 ist `width` eine _Geometreigenschafft_, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für genutzte Elemente verwendet werden kann.
 
 ## Beispiele
 
@@ -867,7 +867,7 @@ svg {
 }
 ```
 
-Dieses Beispiel enthält drei {{SVGElement("rect")}} Elemente mit unterschiedlichen `width` Attributwerten. Das erste `<rect>` hat ein `width="0"` gesetzt. SVG-Elemente mit einer Breite von `0` oder weniger werden nicht gerendert.
+Dieses Beispiel beinhaltet drei {{SVGElement("rect")}} Elemente mit unterschiedlichen `width` Attributwerten. Das erste `<rect>` hat ein `width="0"` gesetzt. SVG-Elemente mit einer Breite von `0` oder weniger werden nicht gerendert.
 
 ```html
 <svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
@@ -904,3 +904,7 @@ Dieses Beispiel enthält drei {{SVGElement("rect")}} Elemente mit unterschiedlic
 ## Spezifikationen
 
 {{Specifications}}
+
+## Siehe auch
+
+- CSS {{cssxref("width")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/writing-mode/index.md b/files/de/web/svg/attribute/writing-mode/index.md
index c55336538..51e9ea05c 100644
--- a/files/de/web/svg/attribute/writing-mode/index.md
+++ b/files/de/web/svg/attribute/writing-mode/index.md
@@ -2,17 +2,17 @@
 title: writing-mode
 slug: Web/SVG/Attribute/writing-mode
 l10n:
-  sourceCommit: a7615ee2f9e22946edff7633962bc1d9eee9e0ad
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`writing-mode`** Attribut legt fest, ob die anfängliche Inline-Fortschrittsrichtung für ein {{SVGElement("text")}}-Element von links nach rechts, von rechts nach links oder von oben nach unten verlaufen soll. Das `writing-mode`-Attribut gilt nur für {{SVGElement("text")}}-Elemente; das Attribut wird bei {{SVGElement("tspan")}}, {{SVGElement("tref")}} und {{SVGElement("textPath")}}-Unterelementen ignoriert. (Beachten Sie, dass sich die Inline-Fortschrittsrichtung innerhalb eines {{SVGElement("text")}}-Elements aufgrund des Unicode-Bidirektional-Algorithmus und der Eigenschaften {{SVGAttr("direction")}} und {{SVGAttr("unicode-bidi")}} ändern kann.)
+Das **`writing-mode`** Attribut legt fest, ob die anfängliche Inline-Progressionsrichtung für ein {{SVGElement("text")}} Element von links nach rechts, von rechts nach links oder von oben nach unten verlaufen soll. Das `writing-mode` Attribut gilt nur für {{SVGElement("text")}} Elemente; das Attribut wird für {{SVGElement("tspan")}}, {{SVGElement("tref")}} und {{SVGElement("textPath")}} Unterelemente ignoriert. (Beachten Sie, dass sich die Inline-Progressionsrichtung innerhalb eines {{SVGElement("text")}} Elements aufgrund des Unicode-Bidirektional-Algorithmus und der Eigenschaften {{SVGAttr("direction")}} und {{SVGAttr("unicode-bidi")}} ändern kann.)
 
 > [!NOTE]
 > Als Präsentationsattribut kann `writing-mode` als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS-Eigenschaft {{cssxref("writing-mode")}}.
 
-Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
+Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
 
 - {{SVGElement("text")}}
 - {{SVGElement("textPath")}}
@@ -58,4 +58,4 @@ Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
 
 ## Siehe auch
 
-- {{cssxref("writing-mode")}}
+- CSS {{cssxref("writing-mode")}} Eigenschaft
diff --git a/files/de/web/svg/attribute/x/index.md b/files/de/web/svg/attribute/x/index.md
index 84bab8751..58f93dca7 100644
--- a/files/de/web/svg/attribute/x/index.md
+++ b/files/de/web/svg/attribute/x/index.md
@@ -2,20 +2,20 @@
 title: x
 slug: Web/SVG/Attribute/x
 l10n:
-  sourceCommit: c276224e43228e7d45e4894729fdc56a904615f5
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`x`**-Attribut definiert eine x-Achsenkoordinate im Benutzerkoordinatensystem.
+Das **`x`** Attribut definiert eine x-Achsen-Koordinate im Benutzerschema-Koordinatensystem.
 
 ## Elemente
 
-Dieses Attribut kann bei den unten beschriebenen SVG-Elementen verwendet werden.
+Sie können dieses Attribut mit den unten beschriebenen SVG-Elementen verwenden.
 
 ### `<feBlend>`
 
-Für {{SVGElement('feBlend')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feBlend')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -48,7 +48,7 @@ Für {{SVGElement('feBlend')}} definiert `x` die minimale x-Koordinate für den
 
 ### `<feColorMatrix>`
 
-Für {{SVGElement('feColorMatrix')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feColorMatrix')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -81,7 +81,7 @@ Für {{SVGElement('feColorMatrix')}} definiert `x` die minimale x-Koordinate fü
 
 ### `<feComponentTransfer>`
 
-Für {{SVGElement('feComponentTransfer')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feComponentTransfer')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -114,7 +114,7 @@ Für {{SVGElement('feComponentTransfer')}} definiert `x` die minimale x-Koordina
 
 ### `<feComposite>`
 
-Für {{SVGElement('feComposite')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feComposite')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -147,7 +147,7 @@ Für {{SVGElement('feComposite')}} definiert `x` die minimale x-Koordinate für
 
 ### `<feConvolveMatrix>`
 
-Für {{SVGElement('feConvolveMatrix')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feConvolveMatrix')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -180,7 +180,7 @@ Für {{SVGElement('feConvolveMatrix')}} definiert `x` die minimale x-Koordinate
 
 ### `<feDiffuseLighting>`
 
-Für {{SVGElement('feDiffuseLighting')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feDiffuseLighting')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -213,7 +213,7 @@ Für {{SVGElement('feDiffuseLighting')}} definiert `x` die minimale x-Koordinate
 
 ### `<feDisplacementMap>`
 
-Für {{SVGElement('feDisplacementMap')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feDisplacementMap')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -246,7 +246,7 @@ Für {{SVGElement('feDisplacementMap')}} definiert `x` die minimale x-Koordinate
 
 ### `<feDropShadow>`
 
-Für {{SVGElement('feDropShadow')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feDropShadow')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -279,7 +279,7 @@ Für {{SVGElement('feDropShadow')}} definiert `x` die minimale x-Koordinate für
 
 ### `<feFlood>`
 
-Für {{SVGElement('feFlood')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feFlood')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -312,7 +312,7 @@ Für {{SVGElement('feFlood')}} definiert `x` die minimale x-Koordinate für den
 
 ### `<feFuncA>`
 
-Für {{SVGElement('feFuncA')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feFuncA')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -345,7 +345,7 @@ Für {{SVGElement('feFuncA')}} definiert `x` die minimale x-Koordinate für den
 
 ### `<feFuncB>`
 
-Für {{SVGElement('feFuncB')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feFuncB')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -378,7 +378,7 @@ Für {{SVGElement('feFuncB')}} definiert `x` die minimale x-Koordinate für den
 
 ### `<feFuncG>`
 
-Für {{SVGElement('feFuncG')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feFuncG')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -411,7 +411,7 @@ Für {{SVGElement('feFuncG')}} definiert `x` die minimale x-Koordinate für den
 
 ### `<feFuncR>`
 
-Für {{SVGElement('feFuncR')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feFuncR')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -444,7 +444,7 @@ Für {{SVGElement('feFuncR')}} definiert `x` die minimale x-Koordinate für den
 
 ### `<feGaussianBlur>`
 
-Für {{SVGElement('feGaussianBlur')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feGaussianBlur')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -477,7 +477,7 @@ Für {{SVGElement('feGaussianBlur')}} definiert `x` die minimale x-Koordinate f
 
 ### `<feImage>`
 
-Für {{SVGElement('feImage')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feImage')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -510,7 +510,7 @@ Für {{SVGElement('feImage')}} definiert `x` die minimale x-Koordinate für den
 
 ### `<feMerge>`
 
-Für {{SVGElement('feMerge')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feMerge')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -543,7 +543,7 @@ Für {{SVGElement('feMerge')}} definiert `x` die minimale x-Koordinate für den
 
 ### `<feMergeNode>`
 
-Für {{SVGElement('feMergeNode')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feMergeNode')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -576,7 +576,7 @@ Für {{SVGElement('feMergeNode')}} definiert `x` die minimale x-Koordinate für
 
 ### `<feMorphology>`
 
-Für {{SVGElement('feMorphology')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feMorphology')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -609,7 +609,7 @@ Für {{SVGElement('feMorphology')}} definiert `x` die minimale x-Koordinate für
 
 ### `<feOffset>`
 
-Für {{SVGElement('feOffset')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feOffset')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -642,7 +642,7 @@ Für {{SVGElement('feOffset')}} definiert `x` die minimale x-Koordinate für den
 
 ### `<fePointLight>`
 
-Für {{SVGElement('fePointLight')}} definiert `x` die x-Position der Lichtquelle im Koordinatensystem, das durch das Attribut {{SVGAttr("primitiveUnits")}} auf dem {{SVGElement("filter")}}-Element definiert wird.
+Für {{SVGElement('fePointLight')}} definiert `x` den x-Standort der Lichtquelle im Koordinatensystem, das durch das Attribut {{SVGAttr("primitiveUnits")}} am {{SVGElement("filter")}}-Element definiert wird.
 
 <table class="properties">
   <tbody>
@@ -669,7 +669,7 @@ Für {{SVGElement('fePointLight')}} definiert `x` die x-Position der Lichtquelle
 
 ### `<feSpecularLighting>`
 
-Für {{SVGElement('feSpecularLighting')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feSpecularLighting')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -702,7 +702,7 @@ Für {{SVGElement('feSpecularLighting')}} definiert `x` die minimale x-Koordinat
 
 ### `<feSpotLight>`
 
-Für {{SVGElement('feSpotLight')}} definiert `x` die x-Position der Lichtquelle im Koordinatensystem, das durch das Attribut {{SVGAttr("primitiveUnits")}} auf dem {{SVGElement("filter")}}-Element definiert wird.
+Für {{SVGElement('feSpotLight')}} definiert `x` den x-Standort der Lichtquelle im Koordinatensystem, das durch das Attribut {{SVGAttr("primitiveUnits")}} am {{SVGElement("filter")}}-Element definiert wird.
 
 <table class="properties">
   <tbody>
@@ -729,7 +729,7 @@ Für {{SVGElement('feSpotLight')}} definiert `x` die x-Position der Lichtquelle
 
 ### `<feTile>`
 
-Für {{SVGElement('feTile')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feTile')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -762,7 +762,7 @@ Für {{SVGElement('feTile')}} definiert `x` die minimale x-Koordinate für den R
 
 ### `<feTurbulence>`
 
-Für {{SVGElement('feTurbulence')}} definiert `x` die minimale x-Koordinate für den Rendering-Bereich der Primitive.
+Für {{SVGElement('feTurbulence')}} definiert `x` die minimale x-Koordinate für den Darstellungsbereich des Primitives.
 
 <table class="properties">
   <tbody>
@@ -795,7 +795,7 @@ Für {{SVGElement('feTurbulence')}} definiert `x` die minimale x-Koordinate für
 
 ### `<filter>`
 
-Für {{SVGElement('filter')}} definiert `x` die x-Koordinate der oberen linken Ecke für den Rendering-Bereich des Filters.
+Für {{SVGElement('filter')}} definiert `x` die x-Koordinate der oberen linken Ecke für den Darstellungsbereich des Filters.
 
 <table class="properties">
   <tbody>
@@ -860,14 +860,14 @@ Für {{SVGElement('foreignObject')}} definiert `x` die x-Koordinate der oberen l
 </table>
 
 > [!NOTE]
-> Die x-Achsenkoordinate des `<foreignObject>` kann auch mit der {{cssxref("x")}} _Geometrie-Eigenschaft_ definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der `x`-Eigenschaft den Wert des `x`-Attributs.
+> Die x-Achsen-Koordinate des `<foreignObject>` kann auch mit der {{cssxref("x")}} _Geometrie-Eigenschaft_ definiert werden. Wenn im CSS festgelegt, überschreibt der `x`-Eigenschaftswert den `x`-Attributwert.
 
 ### `<glyphRef>`
 
 > [!WARNING]
 > Ab SVG2 ist {{SVGElement('glyphRef')}} veraltet und sollte nicht verwendet werden.
 
-Für {{SVGElement('glyphRef')}} definiert `x` die x-Achsenkoordinate des Glyphs.
+Für {{SVGElement('glyphRef')}} definiert `x` die x-Achsen-Koordinate des Glyphs.
 
 <table class="properties">
   <tbody>
@@ -884,9 +884,9 @@ Für {{SVGElement('glyphRef')}} definiert `x` die x-Achsenkoordinate des Glyphs.
     <tr>
       <th scope="row">Standardwert</th>
       <td>
-        <code>0</code> für das erste glyphRef und die End-x-Koordinate des
-        vorherigen {{SVGElement('glyphRef')}} für alle darauf folgenden
-        Geschwister-{{SVGElement('glyphRef')}}.
+        <code>0</code> für das erste glyphRef, und die End-x-Koordinate des
+        vorherigen {{SVGElement('glyphRef')}} für alle nachfolgenden
+        Geschwister {{SVGElement('glyphRef')}}.
       </td>
     </tr>
     <tr>
@@ -930,11 +930,11 @@ Für {{SVGElement('image')}} definiert `x` die x-Koordinate der oberen linken Ec
 </table>
 
 > [!NOTE]
-> Die x-Achsenkoordinate des `<image>` kann auch mit der {{cssxref("x")}} _Geometrie-Eigenschaft_ definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der `x`-Eigenschaft den Wert des `x`-Attributs.
+> Die x-Achsen-Koordinate des `<image>` kann auch mit der {{cssxref("x")}} _Geometrie-Eigenschaft_ definiert werden. Wenn im CSS festgelegt, überschreibt der `x`-Eigenschaftswert den `x`-Attributwert.
 
 ### `<mask>`
 
-Für {{SVGElement('mask')}} definiert `x` die x-Koordinate der oberen linken Ecke seines Wirkungsbereichs. Die genaue Wirkung dieses Attributs wird durch das Attribut {{SVGAttr('maskUnits')}} beeinflusst.
+Für {{SVGElement('mask')}} definiert `x` die x-Koordinate der oberen linken Ecke seines Wirkungsbereichs. Der genaue Effekt dieses Attributs wird durch das Attribut {{SVGAttr('maskUnits')}} beeinflusst.
 
 <table class="properties">
   <tbody>
@@ -967,7 +967,7 @@ Für {{SVGElement('mask')}} definiert `x` die x-Koordinate der oberen linken Eck
 
 ### `<pattern>`
 
-Für {{SVGElement('pattern')}} definiert `x` die x-Koordinate der oberen linken Ecke des Kachelmusters. Die genaue Wirkung dieses Attributs wird durch die Attribute {{SVGAttr('patternUnits')}} und {{SVGAttr('patternTransform')}} beeinflusst.
+Für {{SVGElement('pattern')}} definiert `x` die x-Koordinate der oberen linken Ecke des Kachelmusters. Der genaue Effekt dieses Attributs wird durch die Attribute {{SVGAttr('patternUnits')}} und {{SVGAttr('patternTransform')}} beeinflusst.
 
 <table class="properties">
   <tbody>
@@ -1026,7 +1026,7 @@ Für {{SVGElement('rect')}} definiert `x` die x-Koordinate der oberen linken Eck
 </table>
 
 > [!NOTE]
-> Die x-Achsenkoordinate des `<rect>` kann auch mit der {{cssxref("x")}} _Geometrie-Eigenschaft_ definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der `x`-Eigenschaft den Wert des `x`-Attributs.
+> Die x-Achsen-Koordinate des `<rect>` kann auch mit der {{cssxref("x")}} _Geometrie-Eigenschaft_ definiert werden. Wenn im CSS festgelegt, überschreibt der `x`-Eigenschaftswert den `x`-Attributwert.
 
 ### `<svg>`
 
@@ -1062,13 +1062,13 @@ Für {{SVGElement('svg')}} definiert `x` die x-Koordinate der oberen linken Ecke
 </table>
 
 > [!NOTE]
-> Die x-Achsenkoordinate des `<svg>` kann auch mit der {{cssxref("x")}} _Geometrie-Eigenschaft_ definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der `x`-Eigenschaft den Wert des `x`-Attributs.
+> Die x-Achsen-Koordinate des `<svg>` kann auch mit der {{cssxref("x")}} _Geometrie-Eigenschaft_ definiert werden. Wenn im CSS festgelegt, überschreibt der `x`-Eigenschaftswert den `x`-Attributwert.
 
 ### `<text>`
 
-Für {{SVGElement('text')}}, wenn es einen einzelnen Wert enthält, definiert `x` die x-Koordinate, an der die _Inhaltstextposition_ platziert werden muss. Die _Inhaltstextposition_ ist normalerweise ein Punkt auf der Basislinie der ersten Textzeile. Die genaue _Inhaltstextposition_ wird durch andere Eigenschaften wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}} beeinflusst.
+Für {{SVGElement('text')}}, wenn es einen einzelnen Wert enthält, definiert `x` die x-Koordinate, an der die _Textposition des Inhalts_ platziert werden muss. Die _Textposition des Inhalts_ ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue _Textposition des Inhalts_ wird durch andere Eigenschaften beeinflusst, wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}}.
 
-Wenn es mehrere Werte enthält, definiert `x` die x-Koordinate jedes einzelnen Glyphs aus dem Text. Gibt es weniger Werte als Glyphen, werden die restlichen Glyphen in einer Linie mit dem letzten positionierten Glyph platziert. Gibt es mehr Werte als Glyphen, werden die zusätzlichen Werte ignoriert.
+Wenn es mehrere Werte enthält, definiert `x` die x-Koordinate jedes einzelnen Glyphe im Text. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in Übereinstimmung mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.
 
 <table class="properties">
   <tbody>
@@ -1146,9 +1146,9 @@ line {
 > [!WARNING]
 > Ab SVG2 ist {{SVGElement('tref')}} veraltet und sollte nicht verwendet werden.
 
-Für {{SVGElement('tref')}}, wenn es einen einzelnen Wert enthält, definiert `x` die x-Koordinate, an der die _Inhaltstextposition_ platziert werden muss. Die _Inhaltstextposition_ ist normalerweise ein Punkt auf der Basislinie der ersten Textzeile. Die genaue _Inhaltstextposition_ wird durch andere Eigenschaften wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}} beeinflusst.
+Für {{SVGElement('tref')}}, wenn es einen einzelnen Wert enthält, definiert `x` die x-Koordinate, an der die _Textposition des Inhalts_ platziert werden muss. Die _Textposition des Inhalts_ ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue _Textposition des Inhalts_ wird durch andere Eigenschaften beeinflusst, wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}}.
 
-Wenn es mehrere Werte enthält, definiert `x` die x-Koordinate jedes einzelnen Glyphs aus dem Text. Gibt es weniger Werte als Glyphen, werden die restlichen Glyphen in einer Linie mit dem letzten positionierten Glyph platziert. Gibt es mehr Werte als Glyphen, werden die zusätzlichen Werte ignoriert.
+Wenn es mehrere Werte enthält, definiert `x` die x-Koordinate jedes einzelnen Glyphe im Text. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in Übereinstimmung mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.
 
 <table class="properties">
   <tbody>
@@ -1181,9 +1181,9 @@ Wenn es mehrere Werte enthält, definiert `x` die x-Koordinate jedes einzelnen G
 
 ### `<tspan>`
 
-Für {{SVGElement('tspan')}}, wenn es einen einzelnen Wert enthält, definiert `x` die x-Koordinate, an der die _Inhaltstextposition_ platziert werden muss. Die _Inhaltstextposition_ ist normalerweise ein Punkt auf der Basislinie der ersten Textzeile. Die genaue _Inhaltstextposition_ wird durch andere Eigenschaften wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}} beeinflusst.
+Für {{SVGElement('tspan')}}, wenn es einen einzelnen Wert enthält, definiert `x` die x-Koordinate, an der die _Textposition des Inhalts_ platziert werden muss. Die _Textposition des Inhalts_ ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue _Textposition des Inhalts_ wird durch andere Eigenschaften beeinflusst, wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}}.
 
-Wenn es mehrere Werte enthält, definiert `x` die x-Koordinate jedes einzelnen Glyphs aus dem Text. Gibt es weniger Werte als Glyphen, werden die restlichen Glyphen in einer Linie mit dem letzten positionierten Glyph platziert. Gibt es mehr Werte als Glyphen, werden die zusätzlichen Werte ignoriert.
+Wenn es mehrere Werte enthält, definiert `x` die x-Koordinate jedes einzelnen Glyphe im Text. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in Übereinstimmung mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.
 
 <table class="properties">
   <tbody>
@@ -1292,12 +1292,11 @@ Für {{SVGElement('use')}} definiert `x` die x-Koordinate der oberen linken Ecke
 </table>
 
 > [!NOTE]
-> Das Deklarieren eines `<length>`- oder `<percentage>`-Wertes in CSS mit der {{cssxref("x")}} _Geometrie-Eigenschaft_ überschreibt die x-Achsenkoordinate des `<use>`, die vom `x`-Attribut in einigen Browsern festgelegt wird.
-> Dieses Verhalten ist nicht standardmäßig, veraltet und wird wahrscheinlich in zukünftigen Browserversionen entfernt.
+> Das Deklarieren eines `<length>` oder `<percentage>`-Werts in CSS mithilfe der {{cssxref("x")}} _Geometrie-Eigenschaft_ überschreibt die x-Achsen-Koordinate des `<use>`, das durch das `x`-Attribut in einigen Browsern festgelegt wurde. Dieses Verhalten ist nicht standardisiert, veraltet und wird voraussichtlich in zukünftigen Browserversionen entfernt.
 
 ## Beispiele
 
-Dieses Beispiel enthält drei {{SVGElement("rect")}}-Elemente, jedes mit einem kleineren `x`-Wert als der vorherige.
+Dieses Beispiel enthält drei {{SVGElement("rect")}}-Elemente, jedes mit einem kleineren `x`-Wert als der vorherige Wert.
 
 ```css hidden
 html,
@@ -1320,3 +1319,7 @@ svg {
 ## Spezifikationen
 
 {{Specifications}}
+
+## Siehe auch
+
+- CSS {{cssxref("x")}}-Eigenschaft
diff --git a/files/de/web/svg/attribute/y/index.md b/files/de/web/svg/attribute/y/index.md
index bf63d2a06..3f2792a1b 100644
--- a/files/de/web/svg/attribute/y/index.md
+++ b/files/de/web/svg/attribute/y/index.md
@@ -2,12 +2,12 @@
 title: "y"
 slug: Web/SVG/Attribute/y
 l10n:
-  sourceCommit: 29a5380c100ee4ca462db3690ad4065a9d23895c
+  sourceCommit: 64d85b74ce1cce6a24ae8979da4f3f4a01a47229
 ---
 
 {{SVGRef}}
 
-Das **`y`**-Attribut definiert eine y-Achsen-Koordinate im Benutzer-Koordinatensystem.
+Das **`y`** Attribut definiert eine Koordinate auf der y-Achse im Benutzersystem.
 
 ## Elemente
 
@@ -15,7 +15,7 @@ Dieses Attribut kann mit den in den folgenden Abschnitten beschriebenen SVG-Elem
 
 ### `<feBlend>`
 
-Für {{SVGElement('feBlend')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feBlend')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -48,7 +48,7 @@ Für {{SVGElement('feBlend')}} definiert `y` die minimale y-Koordinate für den
 
 ### `<feColorMatrix>`
 
-Für {{SVGElement('feColorMatrix')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feColorMatrix')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -81,7 +81,7 @@ Für {{SVGElement('feColorMatrix')}} definiert `y` die minimale y-Koordinate fü
 
 ### `<feComponentTransfer>`
 
-Für {{SVGElement('feComponentTransfer')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feComponentTransfer')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -114,7 +114,7 @@ Für {{SVGElement('feComponentTransfer')}} definiert `y` die minimale y-Koordina
 
 ### `<feComposite>`
 
-Für {{SVGElement('feComposite')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feComposite')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -147,7 +147,7 @@ Für {{SVGElement('feComposite')}} definiert `y` die minimale y-Koordinate für
 
 ### `<feConvolveMatrix>`
 
-Für {{SVGElement('feConvolveMatrix')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feConvolveMatrix')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -180,7 +180,7 @@ Für {{SVGElement('feConvolveMatrix')}} definiert `y` die minimale y-Koordinate
 
 ### `<feDiffuseLighting>`
 
-Für {{SVGElement('feDiffuseLighting')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feDiffuseLighting')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -213,7 +213,7 @@ Für {{SVGElement('feDiffuseLighting')}} definiert `y` die minimale y-Koordinate
 
 ### `<feDisplacementMap>`
 
-Für {{SVGElement('feDisplacementMap')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feDisplacementMap')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -246,7 +246,7 @@ Für {{SVGElement('feDisplacementMap')}} definiert `y` die minimale y-Koordinate
 
 ### `<feDropShadow>`
 
-Für {{SVGElement('feDropShadow')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feDropShadow')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -279,7 +279,7 @@ Für {{SVGElement('feDropShadow')}} definiert `y` die minimale y-Koordinate für
 
 ### `<feFlood>`
 
-Für {{SVGElement('feFlood')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feFlood')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -312,7 +312,7 @@ Für {{SVGElement('feFlood')}} definiert `y` die minimale y-Koordinate für den
 
 ### `<feFuncA>`
 
-Für {{SVGElement('feFuncA')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feFuncA')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -345,7 +345,7 @@ Für {{SVGElement('feFuncA')}} definiert `y` die minimale y-Koordinate für den
 
 ### `<feFuncB>`
 
-Für {{SVGElement('feFuncB')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feFuncB')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -378,7 +378,7 @@ Für {{SVGElement('feFuncB')}} definiert `y` die minimale y-Koordinate für den
 
 ### `<feFuncG>`
 
-Für {{SVGElement('feFuncG')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feFuncG')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -411,7 +411,7 @@ Für {{SVGElement('feFuncG')}} definiert `y` die minimale y-Koordinate für den
 
 ### `<feFuncR>`
 
-Für {{SVGElement('feFuncR')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feFuncR')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -444,7 +444,7 @@ Für {{SVGElement('feFuncR')}} definiert `y` die minimale y-Koordinate für den
 
 ### `<feGaussianBlur>`
 
-Für {{SVGElement('feGaussianBlur')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feGaussianBlur')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -477,7 +477,7 @@ Für {{SVGElement('feGaussianBlur')}} definiert `y` die minimale y-Koordinate f
 
 ### `<feImage>`
 
-Für {{SVGElement('feImage')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feImage')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -510,7 +510,7 @@ Für {{SVGElement('feImage')}} definiert `y` die minimale y-Koordinate für den
 
 ### `<feMerge>`
 
-Für {{SVGElement('feMerge')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feMerge')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -543,7 +543,7 @@ Für {{SVGElement('feMerge')}} definiert `y` die minimale y-Koordinate für den
 
 ### `<feMergeNode>`
 
-Für {{SVGElement('feMergeNode')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feMergeNode')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -576,7 +576,7 @@ Für {{SVGElement('feMergeNode')}} definiert `y` die minimale y-Koordinate für
 
 ### `<feMorphology>`
 
-Für {{SVGElement('feMorphology')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feMorphology')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -609,7 +609,7 @@ Für {{SVGElement('feMorphology')}} definiert `y` die minimale y-Koordinate für
 
 ### `<feOffset>`
 
-Für {{SVGElement('feOffset')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feOffset')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -642,7 +642,7 @@ Für {{SVGElement('feOffset')}} definiert `y` die minimale y-Koordinate für den
 
 ### `<fePointLight>`
 
-Für {{SVGElement('fePointLight')}} definiert `y` die y-Position der Lichtquelle in dem durch das {{SVGAttr("primitiveUnits")}}-Attribut auf dem {{SVGElement("filter")}}-Element definierten Koordinatensystem.
+Für {{SVGElement('fePointLight')}} definiert `y` die y-Position der Lichtquelle im Koordinatensystem, das durch das {{SVGAttr("primitiveUnits")}} Attribut des {{SVGElement("filter")}} Elements definiert wird.
 
 <table class="properties">
   <tbody>
@@ -669,7 +669,7 @@ Für {{SVGElement('fePointLight')}} definiert `y` die y-Position der Lichtquelle
 
 ### `<feSpecularLighting>`
 
-Für {{SVGElement('feSpecularLighting')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feSpecularLighting')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -702,7 +702,7 @@ Für {{SVGElement('feSpecularLighting')}} definiert `y` die minimale y-Koordinat
 
 ### `<feSpotLight>`
 
-Für {{SVGElement('feSpotLight')}} definiert `y` die y-Position der Lichtquelle in dem durch das {{SVGAttr("primitiveUnits")}}-Attribut auf dem {{SVGElement("filter")}}-Element definierten Koordinatensystem.
+Für {{SVGElement('feSpotLight')}} definiert `y` die y-Position der Lichtquelle im Koordinatensystem, das durch das {{SVGAttr("primitiveUnits")}} Attribut des {{SVGElement("filter")}} Elements definiert wird.
 
 <table class="properties">
   <tbody>
@@ -729,7 +729,7 @@ Für {{SVGElement('feSpotLight')}} definiert `y` die y-Position der Lichtquelle
 
 ### `<feTile>`
 
-Für {{SVGElement('feTile')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feTile')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -762,7 +762,7 @@ Für {{SVGElement('feTile')}} definiert `y` die minimale y-Koordinate für den R
 
 ### `<feTurbulence>`
 
-Für {{SVGElement('feTurbulence')}} definiert `y` die minimale y-Koordinate für den Rendering-Bereich der Primitiven.
+Für {{SVGElement('feTurbulence')}} definiert `y` die minimale y-Koordinate für den Darstellungsbereich der Primitiven.
 
 <table class="properties">
   <tbody>
@@ -795,7 +795,7 @@ Für {{SVGElement('feTurbulence')}} definiert `y` die minimale y-Koordinate für
 
 ### `<filter>`
 
-Für {{SVGElement('filter')}} definiert `y` die y-Koordinate der oberen linken Ecke für den Rendering-Bereich des Filters.
+Für {{SVGElement('filter')}} definiert `y` die y-Koordinate der oberen linken Ecke für den Darstellungsbereich des Filters.
 
 <table class="properties">
   <tbody>
@@ -828,7 +828,7 @@ Für {{SVGElement('filter')}} definiert `y` die y-Koordinate der oberen linken E
 
 ### `<foreignObject>`
 
-Für {{SVGElement('foreignObject')}} definiert `y` die y-Koordinate der oberen linken Ecke seines Ansichtsfensters.
+Für {{SVGElement('foreignObject')}} definiert `y` die y-Koordinate der oberen linken Ecke seines Ansichtsbereichs.
 
 <table class="properties">
   <tbody>
@@ -860,14 +860,14 @@ Für {{SVGElement('foreignObject')}} definiert `y` die y-Koordinate der oberen l
 </table>
 
 > [!NOTE]
-> Die y-Achsen-Koordinate des `<foreignObject>` kann auch mit der {{cssxref("y")}} _Geometrieeigenschaft_ definiert werden. Wenn sie in CSS festgelegt ist, überschreibt der `y`-Eigenschaftswert den `y`-Attributwert.
+> Die y-Achsen-Koordinate des `<foreignObject>` kann auch mit der {{cssxref("y")}} _Geometrie-Eigenschaft_ definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der `y`-Eigenschaftswert den Wert des `y`-Attributs.
 
 ### `<glyphRef>`
 
 > [!WARNING]
-> Ab SVG2 ist {{SVGElement('glyphRef')}} veraltet und sollte nicht verwendet werden.
+> Ab SVG2 ist {{SVGElement('glyphRef')}} veraltet und sollte nicht mehr verwendet werden.
 
-Für {{SVGElement('glyphRef')}} definiert `y` die y-Achsen-Koordinate des Glyphs.
+Für {{SVGElement('glyphRef')}} definiert `y` die y-Koordinate des Glyphen.
 
 <table class="properties">
   <tbody>
@@ -926,11 +926,11 @@ Für {{SVGElement('image')}} definiert `y` die y-Koordinate der oberen linken Ec
 </table>
 
 > [!NOTE]
-> Die y-Achsen-Koordinate des `<image>` kann auch mit der {{cssxref("y")}} _Geometrieeigenschaft_ definiert werden. Wenn sie in CSS festgelegt ist, überschreibt der `y`-Eigenschaftswert den `y`-Attributwert.
+> Die y-Achsen-Koordinate des `<image>` kann auch mit der {{cssxref("y")}} _Geometrie-Eigenschaft_ definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der `y`-Eigenschaftswert den Wert des `y`-Attributs.
 
 ### `<mask>`
 
-Für {{SVGElement('mask')}} definiert `y` die y-Koordinate der oberen linken Ecke seines Wirkungsbereichs. Die genaue Wirkung dieses Attributs wird vom {{SVGAttr('maskUnits')}}-Attribut beeinflusst.
+Für {{SVGElement('mask')}} definiert `y` die y-Koordinate der oberen linken Ecke seines Wirkungsbereichs. Die genaue Wirkung dieses Attributs wird durch das {{SVGAttr('maskUnits')}} Attribut beeinflusst.
 
 <table class="properties">
   <tbody>
@@ -963,7 +963,7 @@ Für {{SVGElement('mask')}} definiert `y` die y-Koordinate der oberen linken Eck
 
 ### `<pattern>`
 
-Für {{SVGElement('pattern')}} definiert `y` die y-Koordinate der oberen linken Ecke des Kachelmusters. Die genaue Wirkung dieses Attributs wird von den {{SVGAttr('patternUnits')}}- und {{SVGAttr('patternTransform')}}-Attributen beeinflusst.
+Für {{SVGElement('pattern')}} definiert `y` die y-Koordinate der oberen linken Ecke des Kachelmusters. Die genaue Wirkung dieses Attributs wird durch die Attribute {{SVGAttr('patternUnits')}} und {{SVGAttr('patternTransform')}} beeinflusst.
 
 <table class="properties">
   <tbody>
@@ -1022,11 +1022,11 @@ Für {{SVGElement('rect')}} definiert `y` die y-Koordinate der oberen linken Eck
 </table>
 
 > [!NOTE]
-> Die y-Achsen-Koordinate des `<rect>` kann auch mit der {{cssxref("y")}} _Geometrieeigenschaft_ definiert werden. Wenn sie in CSS festgelegt ist, überschreibt der `y`-Eigenschaftswert den `y`-Attributwert.
+> Die y-Achsen-Koordinate des `<rect>` kann auch mit der {{cssxref("y")}} _Geometrie-Eigenschaft_ definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der `y`-Eigenschaftswert den Wert des `y`-Attributs.
 
 ### `<svg>`
 
-Für {{SVGElement('svg')}} definiert `y` die y-Koordinate der oberen linken Ecke seines Ansichtsfensters.
+Für {{SVGElement('svg')}} definiert `y` die y-Koordinate der oberen linken Ecke seines Ansichtsbereichs.
 
 <table class="properties">
   <tbody>
@@ -1058,13 +1058,13 @@ Für {{SVGElement('svg')}} definiert `y` die y-Koordinate der oberen linken Ecke
 </table>
 
 > [!NOTE]
-> Die y-Achsen-Koordinate des `<svg>` kann auch mit der {{cssxref("y")}} _Geometrieeigenschaft_ definiert werden. Wenn sie in CSS festgelegt ist, überschreibt der `y`-Eigenschaftswert den `y`-Attributwert.
+> Die y-Achsen-Koordinate des `<svg>` kann auch mit der {{cssxref("y")}} _Geometrie-Eigenschaft_ definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der `y`-Eigenschaftswert den Wert des `y`-Attributs.
 
 ### `<text>`
 
-Für {{SVGElement('text')}}, wenn es einen einzelnen Wert enthält, definiert `y` die y-Koordinate, an der die _Textpositionsinhalte_ platziert werden müssen. Die _Textpositionsinhalte_ sind normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue _Textpositionsinhalte_ wird von anderen Eigenschaften wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}} beeinflusst.
+Für {{SVGElement('text')}}, wenn es einen einzelnen Wert enthält, definiert `y` die y-Koordinate, an der die _Textposition des Inhalts_ platziert werden muss. Die _Textposition des Inhalts_ ist üblicherweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue _Textposition des Inhalts_ wird von anderen Eigenschaften beeinflusst, wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}}.
 
-Wenn es mehrere Werte enthält, definiert `y` die y-Koordinate jedes einzelnen Glyphen des Textes. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in einer Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.
+Wenn es mehrere Werte enthält, definiert `y` die y-Koordinate jedes einzelnen Glyphen des Textes. Wenn es weniger Werte als Glyphen gibt, werden die restlichen Glyphen in Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.
 
 <table class="properties">
   <tbody>
@@ -1140,11 +1140,11 @@ line {
 ### `<tref>`
 
 > [!WARNING]
-> Ab SVG2 ist {{SVGElement('tref')}} veraltet und sollte nicht verwendet werden.
+> Ab SVG2 ist {{SVGElement('tref')}} veraltet und sollte nicht mehr verwendet werden.
 
-Für {{SVGElement('tref')}}, wenn es einen einzelnen Wert enthält, definiert `y` die y-Koordinate, an der die _Textpositionsinhalte_ platziert werden müssen. Die _Textpositionsinhalte_ sind normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue _Textpositionsinhalte_ wird von anderen Eigenschaften wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}} beeinflusst.
+Für {{SVGElement('tref')}}, wenn es einen einzelnen Wert enthält, definiert `y` die y-Koordinate, an der die _Textposition des Inhalts_ platziert werden muss. Die _Textposition des Inhalts_ ist üblicherweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue _Textposition des Inhalts_ wird von anderen Eigenschaften beeinflusst, wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}}.
 
-Wenn es mehrere Werte enthält, definiert `y` die y-Koordinate jedes einzelnen Glyphen des Textes. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in einer Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.
+Wenn es mehrere Werte enthält, definiert `y` die y-Koordinate jedes einzelnen Glyphen des Textes. Wenn es weniger Werte als Glyphen gibt, werden die restlichen Glyphen in Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.
 
 <table class="properties">
   <tbody>
@@ -1177,9 +1177,9 @@ Wenn es mehrere Werte enthält, definiert `y` die y-Koordinate jedes einzelnen G
 
 ### `<tspan>`
 
-Für {{SVGElement('tspan')}}, wenn es einen einzelnen Wert enthält, definiert `y` die y-Koordinate, an der die _Textpositionsinhalte_ platziert werden müssen. Die _Textpositionsinhalte_ sind normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue _Textpositionsinhalte_ wird von anderen Eigenschaften wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}} beeinflusst.
+Für {{SVGElement('tspan')}}, wenn es einen einzelnen Wert enthält, definiert `y` die y-Koordinate, an der die _Textposition des Inhalts_ platziert werden muss. Die _Textposition des Inhalts_ ist üblicherweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue _Textposition des Inhalts_ wird von anderen Eigenschaften beeinflusst, wie {{SVGAttr('text-anchor')}} oder {{cssxref('direction')}}.
 
-Wenn es mehrere Werte enthält, definiert `y` die y-Koordinate jedes einzelnen Glyphen des Textes. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in einer Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.
+Wenn es mehrere Werte enthält, definiert `y` die y-Koordinate jedes einzelnen Glyphen des Textes. Wenn es weniger Werte als Glyphen gibt, werden die restlichen Glyphen in Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.
 
 <table class="properties">
   <tbody>
@@ -1288,11 +1288,11 @@ Für {{SVGElement('use')}} definiert `y` die y-Koordinate der oberen linken Ecke
 </table>
 
 > [!NOTE]
-> Das Deklarieren eines `<length>`- oder `<percentage>`-Werts in CSS unter Verwendung der {{cssxref("y")}} _Geometrieeigenschaft_ überschreibt die y-Achsen-Koordinate des `<use>`, die vom `y`-Attribut in einigen Browsern festgelegt wird. Dieses Verhalten ist gefährdet.
+> Das Deklarieren eines `<length>` oder `<percentage>` Werts in CSS unter Verwendung der {{cssxref("y")}} _Geometrie-Eigenschaft_ überschreibt die y-Achsen-Koordinate des `<use>`, die durch das `y`-Attribut in einigen Browsern festgelegt wird. Dieses Verhalten ist gefährdet.
 
 ## Beispiele
 
-Dieses Beispiel enthält drei {{SVGElement("rect")}}-Elemente, wobei jedes einen kleineren `y`-Wert als das vorherige hat.
+Dieses Beispiel enthält drei {{SVGElement("rect")}} Elemente, jedes mit einem `y`-Wert, der kleiner als der vorherige Wert ist.
 
 ```css hidden
 html,
@@ -1315,3 +1315,7 @@ svg {
 ## Spezifikationen
 
 {{Specifications}}
+
+## Siehe auch
+
+- CSS {{cssxref("y")}} Eigenschaft