Inhaltsverzeichnis
An dieser Stelle kommt die Bildgrößenänderung mittels CSS ins Spiel. Mit CSS (Cascading Style Sheets) verfügen Sie über leistungsfähige Werkzeuge, um zu steuern, wie Bilder auf Ihrer Webseite erscheinen, und stellen sicher, dass sie optimal aussehen, ohne die Ladezeiten der Seite zu beeinträchtigen.
Dieser Leitfaden wird Sie mit allem ausstatten, was Sie benötigen, um die Bildgrößenänderung in CSS wie ein Profi zu beherrschen. Ob Sie einen persönlichen Blog, einen eleganten Online-Shop oder eine komplexe Webanwendung erstellen, Sie werden lernen, wie Sie Ihre Bilder zum Strahlen bringen.
Grundlagen der Bildgrößenänderung verstehen
Bilddimensionen und Auflösung
Bevor wir CSS-Techniken erkunden, beginnen wir damit, die Kernkonzepte von Bilddimensionen und Auflösung zu verstehen.
- Pixel: Bilder im Web bestehen aus winzigen Quadraten, die als Pixel bezeichnet werden. Jedes Pixel enthält Farbinformationen. Je mehr Pixel ein Bild hat, desto höher ist seine Auflösung und desto mehr Details kann es darstellen.
- Bilddimensionen: Bilddimensionen werden in Breite und Höhe ausgedrückt, gemessen in Pixeln (z.B. 1200px x 800px). Diese Dimensionen bestimmen den physischen Raum, den ein Bild auf einer Webseite einnimmt.
- Seitenverhältnis: Das Seitenverhältnis ist die proportionale Beziehung zwischen der Breite und Höhe eines Bildes (z.B. 16:9, 4:3). Die Beibehaltung des Seitenverhältnisses ist entscheidend bei der Größenänderung von Bildern, um Verzerrungen zu vermeiden.
Bilddateiformate
Das Web unterstützt verschiedene Bilddateiformate, jedes mit seinen Stärken und idealen Anwendungsfällen. Lassen Sie uns kurz die gängigsten untersuchen, denen Sie begegnen werden:
- JPEG (JPG): Dieses Format eignet sich am besten für Fotografien und Bilder mit komplexen Farben und Farbverläufen. Es unterstützt einstellbare Kompression, um Qualität und Dateigröße auszubalancieren.
- PNG: ist ideal für Logos, Grafiken und Bilder, bei denen Transparenz benötigt wird. Es unterstützt verlustfreie Kompression (kein Qualitätsverlust).
- GIF: Wird hauptsächlich für einfache Animationen und Grafiken verwendet. Begrenzte Farbpalette.
- SVG: ist ein vektorbasiertes Format, perfekt für Logos, Icons und Illustrationen. Es ist unendlich skalierbar ohne Qualitätsverlust.
Das Verständnis dieser Dateiformate ist wichtig, da die Wahl des richtigen Formats erheblichen Einfluss auf die Größe Ihrer Webbilder und deren Ladezeiten haben kann. Und denken Sie daran, GenericProductName unterstützt nahtlos all diese Dateitypen und ermöglicht es Ihnen, das perfekte Bild für jede Situation auf Ihrer Webseite zu verwenden.
Auswirkungen auf die Web-Performance
Warum ist all dieses Gerede über Pixel, Bildformate und Größenänderung wichtig? Es läuft auf die Web-Performance hinaus. Große, nicht optimierte Bilder sind ein Hauptgrund für langsame Webseiten. Hier ist der Grund:
- Bandbreitenverbrauch: Große Bilddateien erfordern mehr Daten, die vom Server zum Browser des Besuchers übertragen werden müssen, was wertvolle Bandbreite verbraucht.
- Erhöhte Ladezeiten: Der Browser benötigt Zeit, um große Bilddateien herunterzuladen und zu verarbeiten, was die Anzeige der gesamten Seite verzögert und zu einer frustrierenden Benutzererfahrung führt.
- Negative SEO-Auswirkungen: Suchmaschinen wie Google betrachten die Seitengeschwindigkeit als Ranking-Faktor. Langsame Webseiten können in den Suchergebnissen benachteiligt werden.
- Schlechte Benutzererfahrung (UX): Nicht optimierte Bilder, insbesondere auf mobilen Geräten mit langsameren Verbindungen, können die Benutzererfahrung ruinieren und dazu führen, dass Besucher Ihre Webseite verlassen, bevor sie vollständig geladen ist.
Deshalb ist die Bildgrößenänderung zusammen mit anderen Optimierungstechniken ein Eckpfeiler beim Aufbau schneller, ansprechender Webseiten – besonders wenn Sie ein visuell reichhaltiges Erlebnis bieten möchten!
CSS-Techniken zur Bildgrößenänderung
width- und height-Eigenschaften
Die grundlegendste Methode zur Größenänderung von Bildern in CSS ist die Verwendung der width– und height -Eigenschaften. Sie können die angezeigte Größe eines Bildes direkt steuern, indem Sie diese Eigenschaften mit verschiedenen Werten festlegen:
Pixel (px): Diese bieten die präziseste Kontrolle über Bilddimensionen (z.B. Breite: 300px; Höhe: 200px). Prozentsätze (%): Dies macht Bilder responsiv, indem sie relativ zu ihrem übergeordneten Container skaliert werden können (z.B. Breite: 50%; Höhe: auto, um ein Bild die Hälfte der Breite seines Containers einnehmen zu lassen).
Beispielcode
HTML
<img decoding="async" src="my-image.jpg" alt="A beautiful landscape" style="width: 400px; height: 300px;" title="my image Wie man ein Bild in CSS HTML skaliert">
max-width und max-height Eigenschaften
So funktionieren sie:
max-width: Verhindert, dass ein Bild eine bestimmte Breite überschreitet, ermöglicht aber bei Bedarf eine Verkleinerung (z.B. max-width: 100%; stellt sicher, dass das Bild niemals mehr als 100% der Breite seines Containers einnimmt). max-height: Funktioniert ähnlich und setzt eine Obergrenze für die Höhe eines Bildes (z.B. max-height: 400px; würde verhindern, dass das Bild höher als 400 Pixel wird).
Warum diese verwenden? Sie sind ein Schlüsselinstrument, um zu verhindern, dass Bilder aus ihren Containern ausbrechen und Ihr Layout stören, insbesondere bei responsiven Designs.
Beispielcode
HTML
<img decoding="async" src="my-image.jpg" alt="A beautiful landscape" style="max-width: 100%; height: auto;" title="my image Wie man ein Bild in CSS HTML skaliert">
Beibehaltung des Seitenverhältnisses mit ‚auto‘
Erinnern Sie sich an die Seitenverhältnisse, die wir zuvor besprochen haben? Die Beibehaltung dieser während der Größenänderung ist entscheidend, um zu verhindern, dass Ihre Bilder gequetscht, gestreckt oder verzerrt aussehen. Hier kommt der
Festlegung einer Dimension, die andere ‚auto‘: Wenn Sie entweder width oder height auf einen spezifischen Wert (Pixel oder Prozentsatz) setzen und die entgegengesetzte Dimension auf auto , berechnet der Browser automatisch die fehlende Dimension, um das Seitenverhältnis zu erhalten.
Warum das wichtig ist
Visuelle Integrität: Stellt sicher, dass Ihre Bilder bestmöglich und wie beabsichtigt aussehen. Layout-Harmonie: Verhindert, dass Bilder das Design Ihrer Website stören. Professionalität: Verzerrte Bilder können einen unprofessionellen Eindruck vermitteln.
Beispielcode
HTML
<img decoding="async" src="my-image.jpg" alt="A beautiful landscape" style="width: 100%; height: auto;" title="my image Wie man ein Bild in CSS HTML skaliert">
Hintergrundbilder und background-size
- contain: Das Bild skaliert, um vollständig in den Container zu passen, während es sein Seitenverhältnis beibehält. Einige Bereiche des Hintergrunds können leer bleiben, wenn das Seitenverhältnis des Bildes nicht mit dem des Containers übereinstimmt.
- cover: Das Bild skaliert, um den Container vollständig zu bedecken, während es sein Seitenverhältnis beibehält. Dies kann dazu führen, dass Teile des Bildes beschnitten werden, wenn die Seitenverhältnisse nicht übereinstimmen.
100% 100%: Zwingt das Bild dazu, sich zu strecken, um die gesamte Breite und Höhe des Containers zu füllen, was möglicherweise das Seitenverhältnis verzerrt. Benutzerdefinierte Werte: Sie können auch spezifische Pixel- oder Prozentwerte für background size (z.B. background-size: 500px 300px) festlegen.
Beispielcode
CSS
.my-element {
background-image: url("my-image.jpg");
background-size: cover;
}
Anwendungsfälle
Hero-Bereiche: Erstellen Sie visuell beeindruckende Hero-Bereiche mit großen Hintergrundbildern. Text-Overlays: Kombinieren Sie Hintergrundbilder mit Text für ansprechende Effekte. - Muster: Verwenden Sie kleine, sich wiederholende Bilder, um interessante Hintergrundmuster zu erzeugen.
object-fit-Eigenschaft
Die object-fit Eigenschaft bietet eine präzise Kontrolle darüber, wie ein Bild (oder Video) in seine Inhaltsbox eingepasst wird. Betrachten Sie es als das CSS-Pendant zu den contain– und cover-Konzepten, die wir bei background-size erörtert haben, jedoch mit noch mehr Optionen:
- fill: Das Bild wird gestreckt (möglicherweise verzerrt), um die gesamte Inhaltsbox auszufüllen.
- contain: Das Bild wird skaliert, um vollständig in die Inhaltsbox zu passen, wobei das Seitenverhältnis beibehalten wird (ähnlich wie background-size: contain).
- cover: Das Bild wird skaliert, um die gesamte Inhaltsbox abzudecken, wobei das Seitenverhältnis beibehalten wird. Möglicherweise werden Teile des Bildes beschnitten (ähnlich wie background-size: cover).
- none: Das Bild wird in seiner Originalgröße angezeigt, ohne Größenänderung.
- scale-down: Das Bild wählt zwischen contain und none, je nachdem, ob die Bildgröße kleiner oder größer als die Inhaltsbox ist.
Beispielcode
CSS
img {
width: 100%;
height: 300px;
object-fit: cover;
}
Visuelle Vergleiche: Es ist oft am besten, die verschiedenen object-fit -Werte in Aktion zu sehen, um ihre Unterschiede vollständig zu erfassen. Erwägen Sie die Aufnahme einer Reihe von Bildbeispielen, die jeden Wert innerhalb dieses Artikelabschnitts demonstrieren.
Wann object-fit verwendet werden sollte
- Produktbilder: Gewährleisten Sie eine konsistente Darstellung von Produktfotos innerhalb von Containern mit fester Größe.
- Miniaturansichten: Erstellen Sie einheitliche Miniaturansichtsgalerien, bei denen die Seitenverhältnisse variieren können.
- Vom Benutzer hochgeladene Inhalte: Kontrollieren Sie, wie potenziell unvorhersehbare Bildgrößen angezeigt werden.
Responsive Bildgrößenanpassung
Media Queries
Medienabfragen sind der Eckpfeiler des responsiven Webdesigns. Sie ermöglichen es Ihnen, unterschiedliche CSS-Stile basierend auf spezifischen Bedingungen anzuwenden, wie zum Beispiel der Bildschirmgröße oder der Geräteausrichtung des Browsers des Besuchers.
Grundlegende Medienabfragen-Syntax
CSS
@media (min-width: 768px) {
/* CSS styles for screens 768px or wider */
}
Breakpoints: Die min-width, max-width, etc., innerhalb von Medienabfragen definieren Breakpoints, an denen sich Ihr Design ändert. Übliche Breakpoints zielen auf Tablets, Mobiltelefone und größere Desktop-Computer ab.
Medienabfragen für Bilder
Sie können Medienabfragen verwenden, um Bilder über verschiedene Bildschirmgrößen hinweg unterschiedlich zu skalieren:
CSS
img {
width: 100%;
height: 300px;
object-fit: cover;
}
Erläuterung: In diesem Beispiel nehmen Bilder auf kleineren Bildschirmen die volle Containerbreite ein und schrumpfen dann auf 50% der Containerbreite auf Bildschirmen, die breiter als 768px sind.
Wichtiger Hinweis: Denken Sie immer zuerst an mobile Geräte! Beginnen Sie mit dem Design für kleinere Bildschirme und verwenden Sie dann Medienabfragen, um das Layout für größere Displays schrittweise zu verbessern.
Flüssige Skalierungstechniken
Während Medienabfragen Ihnen viel Kontrolle geben, möchten Sie manchmal, dass Bilder über alle Bildschirmgrößen hinweg gleichmäßig und proportional skalieren, nicht nur an bestimmten Breakpoints. Hier sind ein paar Möglichkeiten, dies zu erreichen:
- Max-width: 100% und Height: auto (Wiederholung): Wenn Sie sich erinnern, haben wir diese Technik früher vorgestellt. Ihre wahre Stärke liegt in ihrer automatischen Anpassungsfähigkeit – Bilder werden niemals die Breite ihres Containers überschreiten, und ihre Höhe wird proportional angepasst.
- Kombination von Prozentangaben mit Medienabfragen: Sie können Prozentangaben für die Breite innerhalb von Medienabfragen verwenden, um flüssige Layouts mit gezielten Anpassungen zu erstellen. Zum Beispiel:
CSS
img {
width: 100%;
height: auto;
}
@media (min-width: 768px) {
img {
width: 50%; /* Images occupy 50% of their container on larger screens */
}
}
Flüssige Größenanpassung ist nicht immer die perfekte Lösung. Manchmal funktionieren Bilder mit festen Abmessungen besser innerhalb bestimmter Designelemente. Es ist wichtig, die richtigen Skalierungstechniken strategisch basierend auf Ihrem Gesamtlayout zu wählen.
Das ’srcset‘-Attribut
Das srcset-Attribut, das mit dem <img> -Tag verwendet wird, bietet eine Möglichkeit, dem Browser mehrere Versionen desselben Bildes in unterschiedlichen Auflösungen anzubieten. Dies ermöglicht es dem Browser, das am besten geeignete Bild basierend auf dem Gerät und der Bildschirmgröße des Benutzers auszuwählen.
Grundlegende Syntax
HTML
<img decoding="async" src="my-image.jpg" alt="A beautiful landscape" srcset="my-image-small.jpg 480w,
my-image-medium.jpg 800w,
my-image-large.jpg 1200w" title="my image Wie man ein Bild in CSS HTML skaliert">
Der ‚w‘-Deskriptor: Informiert den Browser über die Breite jeder Bildversion.
Vorteile
- Verbesserte Leistung durch Vermeidung unnötig großer Bilddownloads.
- Optimierte Darstellung für hochauflösende Bildschirme.
Hinweis: srcset ist ein leistungsfähiges Instrument für fortgeschrittene responsive Bildoptimierung, das häufig in Kombination mit anderen von uns diskutierten Techniken verwendet wird.
Optimierung und beste Praktiken
Bildoptimierungswerkzeuge
Während Sie Bilder manuell mit Bildbearbeitungssoftware verkleinern können, rationalisieren dedizierte Optimierungswerkzeuge den Prozess und erschließen zusätzliche Leistungsgewinne:
Elementors Bildoptimierer:
Dieses leistungsstarke Werkzeug ist nahtlos in die Elementor-Erfahrung integriert und vereinfacht die Bildoptimierung innerhalb Ihres WordPress-Workflows.
Wichtige Überlegungen
- Verlustbehaftet vs. Verlustfrei: Verlustbehaftete Komprimierung bietet eine größere Reduzierung der Dateigröße, jedoch mit einem gewissen Verlust an Bildqualität. Verlustfreie Komprimierung bewahrt die volle Qualität auf Kosten geringfügig größerer Dateien. Wählen Sie basierend auf dem Bildtyp sorgfältig aus.
- Bildformat (Wiederholung): Bedenken Sie, dass JPEGs im Allgemeinen besser für Fotos geeignet sind, während PNGs bei Grafiken hervorragend abschneiden. Die Wahl des richtigen Formats vor der Optimierung ist entscheidend!
Profi-Tipp: Oft bietet die Verwendung einer Kombination aus Elementor Bildoptimierer für die grundlegende Bildbearbeitung und spezialisierten externen Diensten für spezifische Anforderungen die größte Flexibilität und die besten Ergebnisse.
image-rendering Eigenschaft
Die image-rendering Eigenschaft gibt dem Browser Hinweise darauf, wie er das Rendering priorisieren sollte, wenn ein Bild vergrößert oder verkleinert wird. Hier sind die gängigen Werte:
- auto: Der Standardwert des Browsers. Es wird typischerweise versucht, ein Gleichgewicht zwischen Geschwindigkeit und Qualität zu erreichen.
- pixelated: Behält ein scharfes, pixeliges Erscheinungsbild bei, ideal für Retro-Grafiken oder wenn absichtlich harte Pixelkanten bei der Vergrößerung erhalten bleiben sollen.
- smooth: Priorisiert ein weicheres, weniger pixeliges Aussehen (dies kann bei der Vergrößerung von Bildern zu Unschärfe führen).
Beispiel
CSS
img {
image-rendering: pixelated;
}
Wann es anzuwenden ist
- Pixel-Art: pixelated ist essentiell für Pixel-Art, um deren beabsichtigte Ästhetik beizubehalten.
- Leistungsüberlegungen: In einigen Fällen kann die Wahl von pixelated geringfügige Verbesserungen der Renderinggeschwindigkeit für vergrößerte Bilder bieten.
Moderne Browser sind recht gut in der automatischen Bildwiedergabe. Verwenden Sie image rendering strategisch, da das Überschreiben der Standardeinstellungen manchmal unbeabsichtigte Konsequenzen haben kann.
Überlegungen zur Größenänderung für spezifische Bildtypen
Lassen Sie uns die wichtigsten Dinge aufschlüsseln, die bei der Größenänderung einiger der häufigsten Bildtypen, denen Sie auf Websites begegnen werden, zu beachten sind:
Hero-Bilder
- Große, aufmerksamkeitserregende Bilder müssen in allen Größen atemberaubend aussehen.
- Die Optimierung der Dateigröße ist entscheidend (erwägen Sie Formate wie WebP, falls unterstützt).
- Verwenden Sie Medienabfragen oder srcset, um eine optimale Auflösung für verschiedene Bildschirmgrößen sicherzustellen.
Bildergalerien
- Verwenden Sie Miniaturansichten, die schnell laden und auf optimierte Vollversionen verlinken.
- Implementieren Sie Techniken wie Lazy Loading für reibungslose Bilderladeerlebnisse.
- Konsistente Seitenverhältnisse über Galeriebilder hinweg schaffen einen polierten Look.
Produktbilder (E-Commerce)
- Hochwertige Bilder sind für die Steigerung von Konversionen unerlässlich.
- Möglicherweise wird eine Zoomfunktion benötigt, die größere Bildformate erfordert.
- Konsistente Größenänderung und Weißraum schaffen einen übersichtlichen Produktkatalog.
- Erwägen Sie die Verwendung eines CDN (wie Cloudflare Enterprise, das in Elementor Hosting enthalten ist) für eine schnelle weltweite Bildauslieferung.
Von Benutzern hochgeladene Inhalte
- Implementieren Sie serverseitige Plausibilitätsprüfungen, um Bilddimensionen und Dateigrößen zu begrenzen.
- Automatische Optimierung zur Verhinderung des Hochladens massiver, nicht optimierter Bilder.
- Zeigen Sie den Benutzern klare Richtlinien zu akzeptierten Bildformaten und Größenbeschränkungen an.
Browser-Kompatibilität
Während moderne Browser eine hervorragende support für die meisten CSS-Bildgrößenänderungstechniken bieten, ist es wichtig, sich potenzieller Inkonsistenzen bewusst zu sein und zu wissen, wie man sie angeht.
Ältere Browser
- Sie unterstützen möglicherweise nicht support neuere Funktionen wie object-fit oder fortgeschrittenes background-size-Verhalten.
- Polyfills oder Fallbacks könnten notwendig sein, um eine konsistente Erfahrung auf älteren Browsern zu bieten (falls deren Unterstützung erforderlich ist).
Herstellerpräfixe
Gelegentlich erfordern experimentelle CSS-Funktionen Herstellerpräfixe (z.B. -webkit- , -moz- ) für die breiteste Kompatibilität, bis sie vollständig standardisiert sind.
Testen
Testen Sie die Bildanzeige Ihrer Website gründlich auf verschiedenen Browsern und Geräten. Werkzeuge wie BrowserStack erleichtern browserübergreifende Tests.
Progressive Enhancement
Beginnen Sie mit einer soliden Basisleistung, die überall funktioniert. Verwenden Sie Techniken wie Funktionserkennung, um erweiterte Bildgrößenänderungsfunktionen für Browser zu implementieren, die support unterstützen.
Mit Elementor werden viele dieser Kompatibilitätsprobleme für Sie gelöst, wodurch eine responsive und browserübergreifende Bildanzeige gewährleistet wird, ohne dass Sie jede kleine Eigenheit untersuchen müssen.
Fortgeschrittene Techniken zur Größenänderung
Viewport-Einheiten (vh, vw)
Viewport-Einheiten bieten eine Möglichkeit, Elemente relativ zum Viewport (dem sichtbaren Bereich des Browsers) zu dimensionieren. So beziehen sie sich auf die Bildgrößenänderung:
vh: 1vh entspricht 1% der Viewport-Höhe. vw: 1vw entspricht 1% der Viewport-Breite.
Beispiel
CSS
img {
max-height: 80vh; /* Image height will never exceed 80% of the viewport height */
}
Anwendungsfälle mit Bildern
Festlegen flexibler Größen: Kombinieren Sie Prozentsätze und feste Einheiten, um Elemente zu erstellen, die sich in der Größe ändern, aber bestimmte Abstände beibehalten (z.B. eine Seitenleiste, die 30% der Breite minus einem festen 20px-Rand einnimmt). Komplexe Berechnungen: Erstellen Sie ausgeklügelte Regeln zur Größenänderung, die mehrere Faktoren berücksichtigen. Responsive Anpassungen: Verwenden Sie calc() innerhalb von Medienabfragen, um die Bildgrößenänderung an bestimmten Breakpoints feinzujustieren.
Beispiel
CSS
img {
max-width: 100%;
height: auto;
}
@media (min-width: 900px) {
img {
width: calc(50% - 30px); /* Image takes up 50% of its container minus 30px on larger screens */
}
}
CSS-Filter und -Transformationen
CSS-Filter und -Transformationen bieten Möglichkeiten, Bilder visuell zu manipulieren und eröffnen kreative Möglichkeiten, die über die grundlegende Größenänderung hinausgehen.
Filter
grayscale: Konvertiert ein Bild in Graustufen. sepia: Wendet einen Sepia-Ton im Vintage-Stil an. blur: Verwischt ein Bild. brightness, contrast, saturation: Passen Sie diese visuellen Eigenschaften an. - Und mehr!
Transformationen
scale: Skaliert ein Bild nach oben oder unten. rotate: Rotiert ein Bild. skew, translate: Wendet Verzerrungseffekte an oder positioniert ein Bild neu.
Beispiel
CSS
img:hover {
filter: grayscale(100%);
transform: scale(1.1); /* Image scales up slightly on hover */
}
Hinweis zur Leistung: Übermäßige Verwendung von Filtern und Transformationen kann sich potenziell auf die Seitenladegeschwindigkeiten auswirken, insbesondere auf älteren Geräten. Setzen Sie sie strategisch für gezielte Effekte ein.
Fazit
In diesem Leitfaden haben Sie gelernt, dass die Größenänderung von Bildern nicht nur darum geht, Bilder passend zu machen. Es ist ein entscheidender Aspekt der Webperformance, der Benutzererfahrung und der Aufrechterhaltung einer professionellen Online-Präsenz.
Wenn Sie WordPress-Benutzer sind, vereinfacht Elementor den gesamten Prozess. Von intuitiven Steuerungen zur Bildgrößenänderung und dem integrierten Image Optimizer bis hin zur nahtlosen Integration mit einer leistungsorientierten Hosting-Lösung wie Elementor Hosting haben Sie alles, um beeindruckende Visuals ohne Geschwindigkeitseinbußen zu liefern.
Denken Sie daran:
Optimieren Sie Ihre Bilder bevor Sie sie hochladen. - Berücksichtigen Sie stets den Zweck und Kontext des Bildes bei der Auswahl von Techniken zur Größenänderung.
- Testen Sie die visuelle Darstellung Ihrer Website auf verschiedenen Geräten, um ein perfektes Erlebnis für alle Besucher sicherzustellen.
Suchen Sie nach neuen Inhalten?
Erhalten Sie Artikel und Einblicke aus unserem wöchentlichen Newsletter.
Durch die Eingabe Ihrer E-Mail-Adresse erklären Sie sich mit dem Erhalt von Elementor-E-Mails, einschließlich Marketing-E-Mails,
einverstanden und stimmen unseren Allgemeinen Geschäftsbedingungen und unserer Datenschutzrichtlinie zu.
