Grundlagen von HTML, CSS und JavaScript

In der modernen Webentwicklung bilden HTML, CSS und JavaScript die drei unverzichtbaren Technologien, die gemeinsam das Rückgrat jeder Webseite bilden. HTML definiert die Struktur und den Inhalt, CSS sorgt für das ansprechende Design und Layout, während JavaScript interaktive Funktionalitäten ermöglicht. Das Verständnis dieser Grundlagen ist essentiell für jeden, der Webseiten erstellen oder Webanwendungen entwickeln möchte. Im Folgenden werden die einzelnen Technologien detailliert beschrieben, um Einsteigern einen fundierten Überblick zu bieten.

HTML-Tags und ihre Bedeutung

HTML-Tags strukturieren den Inhalt einer Webseite und geben ihm Bedeutung. Ein Tag wie `

` markiert eine Hauptüberschrift, während `
` einen Absatz definiert. Jedes Element kann auch Attribute besitzen, die weitere Informationen liefern, etwa durch das `class`-Attribut für CSS-Stilzuweisungen. Durch korrektes Verwenden der Tags wird der Inhalt logisch gegliedert und für Browser sowie Suchmaschinen leicht interpretierbar. So ermöglicht HTML es, nicht nur optisch Texte darzustellen, sondern auch deren Zweck zu kommunizieren, etwa als Navigationslink oder als Bildbeschreibung.

Formulare und Eingabefelder

HTML bietet umfangreiche Möglichkeiten, um Formularstrukturen zu erstellen, mit denen Benutzer Daten eingeben können. Eingabefelder wie Textfelder, Auswahlmenüs oder Checkboxen werden mit spezifischen Tags wie ``, `

` umgesetzt. Formulare sind essenziell für Interaktionen im Web, beispielsweise bei der Benutzerregistrierung oder dem Bestellprozess. Validierung und Strukturierung sind wichtig, damit die eingegebenen Daten korrekt verarbeitet werden können und eine benutzerfreundliche Oberfläche entsteht. Die semantische Gestaltung von Formularen verbessert auch die Zugänglichkeit für unterstützende Technologien.						</div>
				</div>
				<div class="elementor-element elementor-element-3b3539 elementor-widget elementor-widget-button" data-id="3b3539" data-element_type="widget" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a class="elementor-button elementor-button-link elementor-size-sm" href="https://cupletz.com">
						<span class="elementor-button-content-wrapper">
									<span class="elementor-button-text">Mehr erfahren</span>
					</span>
					</a>
		</div>
				</div>
				</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-70278d2f e-flex e-con-boxed e-con e-parent" data-id="70278d2f" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-2fe582f3 elementor-widget elementor-widget-heading" data-id="2fe582f3" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">CSS – Das Design und Layout einer Webseite</h2>		</div>
				</div>
		<div class="elementor-element elementor-element-637fb2ee e-con-full e-flex e-con e-child" data-id="637fb2ee" data-element_type="container" data-settings="{"background_background":"classic"}">
		<div class="elementor-element elementor-element-28fce8a0 e-con-full e-flex e-con e-child" data-id="28fce8a0" data-element_type="container" data-settings="{"background_background":"gradient"}">
		<div class="elementor-element elementor-element-4a7ed9ea e-con-full e-flex e-con e-child" data-id="4a7ed9ea" data-element_type="container">
				<div class="elementor-element elementor-element-7b59eb77 elementor-widget elementor-widget-heading" data-id="7b59eb77" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h3 class="elementor-heading-title elementor-size-default">Selektoren und Eigenschaften</h3>		</div>
				</div>
				<div class="elementor-element elementor-element-7a1d2e3a m-0 elementor-widget elementor-widget-text-editor" data-id="7a1d2e3a" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							CSS arbeitet mit Selektoren, die gezielt HTML-Elemente ansprechen, sowie mit Eigenschaften, die das Aussehen dieser Elemente bestimmen. Selektoren können sehr spezifisch sein, von einfachen Tag- und Klassen-Bezeichnungen bis hin zu komplexen Pseudoklassen, die nur bestimmte Zustände ansprechen. Eigenschaften steuern Attribute wie Farbe, Schriftgröße, Rahmen oder Abstände. Diese Kombination ermöglicht es, individuelle und konsistente Designs für eine Webseite zu erstellen. Durch den Cascade-Mechanismus wird festgelegt, welche Regel bei Mehrfachangabe prioritär angewendet wird, was Flexibilität und Kontrolle bietet.						</div>
				</div>
				<div class="elementor-element elementor-element-3c63b175 elementor-widget elementor-widget-button" data-id="3c63b175" data-element_type="widget" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a class="elementor-button elementor-button-link elementor-size-sm" href="https://cupletz.com">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-long-arrow-alt-right" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z"></path></svg>			</span>
									<span class="elementor-button-text">Mehr erfahren</span>
					</span>
					</a>
		</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-a763e61 e-con-full e-flex e-con e-child" data-id="a763e61" data-element_type="container">
				<div class="elementor-element elementor-element-1e79a91 elementor-widget elementor-widget-heading" data-id="1e79a91" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h3 class="elementor-heading-title elementor-size-default">Box-Modell und Layout</h3>		</div>
				</div>
				<div class="elementor-element elementor-element-aa19a50 m-0 elementor-widget elementor-widget-text-editor" data-id="aa19a50" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							Das CSS-Box-Modell beschreibt, wie Elemente auf der Webseite aufgebaut sind und sich anordnen lassen. Jedes HTML-Element wird als rechteckige Box betrachtet, die aus Inhalt, Padding, Border und Margin besteht. Dieses Modell ist grundlegend, um Abstände und Größen korrekt zu kontrollieren und das Layout einer Seite präzise zu gestalten. Techniken wie Flexbox und Grid erweitern die Möglichkeiten für komplexe und responsive Layouts, indem sie flexible Reihen- oder Spaltenstrukturen bieten. Ein gutes Verständnis des Box-Modells ist daher essentiell für die effiziente Gestaltung und Optimierung von Webseiten.						</div>
				</div>
				<div class="elementor-element elementor-element-52e2bf95 elementor-widget elementor-widget-button" data-id="52e2bf95" data-element_type="widget" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a class="elementor-button elementor-button-link elementor-size-sm" href="https://cupletz.com">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-long-arrow-alt-right" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z"></path></svg>			</span>
									<span class="elementor-button-text">Mehr erfahren</span>
					</span>
					</a>
		</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-2811bb82 e-con-full e-flex e-con e-child" data-id="2811bb82" data-element_type="container">
				<div class="elementor-element elementor-element-5b51b7b5 elementor-widget elementor-widget-heading" data-id="5b51b7b5" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h3 class="elementor-heading-title elementor-size-default">Animationen und Transitionen</h3>		</div>
				</div>
				<div class="elementor-element elementor-element-34ec8217 m-0 elementor-widget elementor-widget-text-editor" data-id="34ec8217" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							CSS ermöglicht auch Animationen und Übergangseffekte, die Webseiten dynamischer und benutzerfreundlicher gestalten. Mit `@keyframes`-Regeln können komplexe Bewegungsabläufe definiert werden, während Transitionen fließende Veränderungen von Stilzuständen bewirken. Diese Effekte steigern das Nutzererlebnis, indem sie visuelles Feedback geben und Inhalte auf interessante Weise präsentieren. Dabei bleiben Animationen in CSS performanter als JavaScript-basierte Alternativen, da sie von modernen Browsern hardwarebeschleunigt ausgeführt werden. Durch die richtige Dosierung schaffen sie eine moderne, ansprechende Benutzeroberfläche.						</div>
				</div>
				<div class="elementor-element elementor-element-1bd1ccf0 elementor-widget elementor-widget-button" data-id="1bd1ccf0" data-element_type="widget" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a class="elementor-button elementor-button-link elementor-size-sm" href="https://cupletz.com">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-long-arrow-alt-right" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z"></path></svg>			</span>
									<span class="elementor-button-text">Mehr erfahren</span>
					</span>
					</a>
		</div>
				</div>
				</div>
				</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-282dcc31 e-flex e-con-boxed e-con e-parent" data-id="282dcc31" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-21aebfd3 elementor-widget elementor-widget-heading" data-id="21aebfd3" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">JavaScript – Interaktivität und Funktionalität</h2>		</div>
				</div>
		<div class="elementor-element elementor-element-3ffcb8f0 e-flex e-con-boxed e-con e-child" data-id="3ffcb8f0" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-a054c7b e-con-full e-flex e-con e-child" data-id="a054c7b" data-element_type="container">
		<div class="elementor-element elementor-element-6af190a1 e-con-full e-flex e-con e-child" data-id="6af190a1" data-element_type="container">
				<div class="elementor-element elementor-element-309cea4e elementor-widget__width-inherit elementor-widget elementor-widget-heading" data-id="309cea4e" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<div class="elementor-heading-title elementor-size-default">01</div>		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-739dfdf8 e-con-full e-flex e-con e-child" data-id="739dfdf8" data-element_type="container">
				<div class="elementor-element elementor-element-4cf5931 elementor-widget elementor-widget-heading" data-id="4cf5931" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h3 class="elementor-heading-title elementor-size-default">DOM-Manipulation</h3>		</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-6343d080 e-con-full e-flex e-con e-child" data-id="6343d080" data-element_type="container">
				<div class="elementor-element elementor-element-20713769 elementor-widget elementor-widget-text-editor" data-id="20713769" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							Das Document Object Model (DOM) repräsentiert eine Webseite als Baumstruktur, die mit JavaScript verändert werden kann. Durch DOM-Manipulation lassen sich Elemente hinzufügen, entfernen oder verändern, um die Seite dynamisch anzupassen. So können Inhalte aktualisiert, Benutzeraktionen ausgewertet oder visuelle Effekte erzeugt werden. JavaScript bietet Methoden wie `getElementById`, `querySelector` und `addEventListener`, um gezielt auf Teile der Seite zuzugreifen und diese interaktiv zu gestalten. Diese Möglichkeit ist zentral für moderne Webanwendungen, die auf Nutzerinteraktionen in Echtzeit reagieren.						</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-618d0cd3 e-con-full e-flex e-con e-child" data-id="618d0cd3" data-element_type="container">
		<div class="elementor-element elementor-element-778cbe6d e-con-full e-flex e-con e-child" data-id="778cbe6d" data-element_type="container">
		<div class="elementor-element elementor-element-73236835 e-con-full e-flex e-con e-child" data-id="73236835" data-element_type="container">
				<div class="elementor-element elementor-element-acc244d elementor-widget__width-inherit elementor-widget elementor-widget-heading" data-id="acc244d" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<div class="elementor-heading-title elementor-size-default">02</div>		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-5082c0e8 e-con-full e-flex e-con e-child" data-id="5082c0e8" data-element_type="container">
				<div class="elementor-element elementor-element-4ab7212b elementor-widget elementor-widget-heading" data-id="4ab7212b" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h3 class="elementor-heading-title elementor-size-default">Ereignissteuerung und Benutzerinteraktionen</h3>		</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-7e75c9a8 e-con-full e-flex e-con e-child" data-id="7e75c9a8" data-element_type="container">
				<div class="elementor-element elementor-element-69d2e506 elementor-widget elementor-widget-text-editor" data-id="69d2e506" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							JavaScript ermöglicht die Handhabung von Ereignissen, die durch Nutzeraktionen wie Klicks, Tastatureingaben oder Mausbewegungen ausgelöst werden. Durch das registrieren von Event-Listenern lassen sich spezifische Funktionen bei Auftreten eines Ereignisses ausführen. Dies ist grundlegend, um interaktive Benutzeroberflächen zu schaffen, die auf Eingaben reagieren, Formulare validieren oder dynamische Inhalte laden. Ereignissteuerung bildet somit die Schnittstelle zwischen Nutzer und Webseite, was die Nutzererfahrung maßgeblich verbessert und webbasierte Anwendungen lebendig macht.						</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-645699f4 e-con-full e-flex e-con e-child" data-id="645699f4" data-element_type="container">
		<div class="elementor-element elementor-element-37b70d9e e-con-full e-flex e-con e-child" data-id="37b70d9e" data-element_type="container">
		<div class="elementor-element elementor-element-25d63fa1 e-con-full e-flex e-con e-child" data-id="25d63fa1" data-element_type="container">
				<div class="elementor-element elementor-element-7274cbde elementor-widget__width-inherit elementor-widget elementor-widget-heading" data-id="7274cbde" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<div class="elementor-heading-title elementor-size-default">03</div>		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-7a374f3a e-con-full e-flex e-con e-child" data-id="7a374f3a" data-element_type="container">
				<div class="elementor-element elementor-element-99828c3 elementor-widget elementor-widget-heading" data-id="99828c3" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h3 class="elementor-heading-title elementor-size-default">Grundlagen der Programmierung mit JavaScript</h3>		</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-54cee868 e-con-full e-flex e-con e-child" data-id="54cee868" data-element_type="container">
				<div class="elementor-element elementor-element-643567bd elementor-widget elementor-widget-text-editor" data-id="643567bd" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							JavaScript beinhaltet klassische Programmierkonzepte wie Variablen, Funktionen, Bedingungen und Schleifen, die die Logik einer Webanwendung definieren. Mit Variablen können Daten gespeichert, mit Bedingungen Entscheidungen getroffen und mit Schleifen Wiederholungen gesteuert werden. Funktionen ermöglichen es, wiederverwendbaren Code zu strukturieren und komplexe Abläufe zu organisieren. Ein grundlegendes Verständnis dieser Konzepte ist entscheidend, um nicht nur einfache Interaktionen zu realisieren, sondern auch umfangreiche Anwendungen mit klarer Struktur und gut wartbarem Code zu entwickeln.						</div>
				</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-d92c791 e-flex e-con-boxed e-con e-parent" data-id="d92c791" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-7c542c29 elementor-widget elementor-widget-google_maps" data-id="7c542c29" data-element_type="widget" data-widget_type="google_maps.default">
				<div class="elementor-widget-container">
			<style>/*! elementor - v3.22.0 - 17-06-2024 */
.elementor-widget-google_maps .elementor-widget-container{overflow:hidden}.elementor-widget-google_maps .elementor-custom-embed{line-height:0}.elementor-widget-google_maps iframe{height:300px}</style>		<div class="elementor-custom-embed">
			<iframe loading="lazy"
					src="https://maps.google.com/maps?q=Commerzbank%20Tower%2C%20Kaiserstra%C3%9Fe%2016%2C%2060311%20Frankfurt%20am%20Main%2C%20Germany&t=m&z=10&output=embed&iwloc=near"
					title="Commerzbank Tower, Kaiserstraße 16, 60311 Frankfurt am Main, Germany"
					aria-label="Commerzbank Tower, Kaiserstraße 16, 60311 Frankfurt am Main, Germany"
			></iframe>
		</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-7665643b e-flex e-con-boxed e-con e-parent" data-id="7665643b" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-76d14b01 e-con-full e-flex e-con e-child" data-id="76d14b01" data-element_type="container">
				<div class="elementor-element elementor-element-3d28ccd9 elementor-nav-menu__align-center elementor-nav-menu--dropdown-none elementor-widget elementor-widget-nav-menu" data-id="3d28ccd9" data-element_type="widget" data-settings="{"layout":"horizontal","submenu_icon":{"value":"<svg class=\"e-font-icon-svg e-fas-caret-down\" viewBox=\"0 0 320 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\"><\/path><\/svg>","library":"fa-solid"}}" data-widget_type="nav-menu.default">
				<div class="elementor-widget-container">
						<nav class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-underline e--animation-fade">
				<ul id="menu-1-3d28ccd9" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-543"><a href="https://cupletz.com/geschaftsbedingungen/" class="elementor-item">Geschäftsbedingungen</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-544"><a href="https://cupletz.com/datenschutzrichtlinie/" class="elementor-item">Datenschutzrichtlinie</a></li>
</ul>			</nav>
						<nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" aria-hidden="true">
				<ul id="menu-2-3d28ccd9" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-543"><a href="https://cupletz.com/geschaftsbedingungen/" class="elementor-item" tabindex="-1">Geschäftsbedingungen</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-544"><a href="https://cupletz.com/datenschutzrichtlinie/" class="elementor-item" tabindex="-1">Datenschutzrichtlinie</a></li>
</ul>			</nav>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-ab5b383 e-con-full e-flex e-con e-child" data-id="ab5b383" data-element_type="container">
				<div class="elementor-element elementor-element-16f73c6d elementor-shape-rounded elementor-grid-0 e-grid-align-center elementor-widget elementor-widget-social-icons" data-id="16f73c6d" data-element_type="widget" data-widget_type="social-icons.default">
				<div class="elementor-widget-container">
			<style>/*! elementor - v3.22.0 - 17-06-2024 */
.elementor-widget-social-icons.elementor-grid-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-mobile-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-tablet-0 .elementor-widget-container{line-height:1;font-size:0}.elementor-widget-social-icons:not(.elementor-grid-0):not(.elementor-grid-tablet-0):not(.elementor-grid-mobile-0) .elementor-grid{display:inline-grid}.elementor-widget-social-icons .elementor-grid{grid-column-gap:var(--grid-column-gap,5px);grid-row-gap:var(--grid-row-gap,5px);grid-template-columns:var(--grid-template-columns);justify-content:var(--justify-content,center);justify-items:var(--justify-content,center)}.elementor-icon.elementor-social-icon{font-size:var(--icon-size,25px);line-height:var(--icon-size,25px);width:calc(var(--icon-size, 25px) + 2 * var(--icon-padding, .5em));height:calc(var(--icon-size, 25px) + 2 * var(--icon-padding, .5em))}.elementor-social-icon{--e-social-icon-icon-color:#fff;display:inline-flex;background-color:#69727d;align-items:center;justify-content:center;text-align:center;cursor:pointer}.elementor-social-icon i{color:var(--e-social-icon-icon-color)}.elementor-social-icon svg{fill:var(--e-social-icon-icon-color)}.elementor-social-icon:last-child{margin:0}.elementor-social-icon:hover{opacity:.9;color:#fff}.elementor-social-icon-android{background-color:#a4c639}.elementor-social-icon-apple{background-color:#999}.elementor-social-icon-behance{background-color:#1769ff}.elementor-social-icon-bitbucket{background-color:#205081}.elementor-social-icon-codepen{background-color:#000}.elementor-social-icon-delicious{background-color:#39f}.elementor-social-icon-deviantart{background-color:#05cc47}.elementor-social-icon-digg{background-color:#005be2}.elementor-social-icon-dribbble{background-color:#ea4c89}.elementor-social-icon-elementor{background-color:#d30c5c}.elementor-social-icon-envelope{background-color:#ea4335}.elementor-social-icon-facebook,.elementor-social-icon-facebook-f{background-color:#3b5998}.elementor-social-icon-flickr{background-color:#0063dc}.elementor-social-icon-foursquare{background-color:#2d5be3}.elementor-social-icon-free-code-camp,.elementor-social-icon-freecodecamp{background-color:#006400}.elementor-social-icon-github{background-color:#333}.elementor-social-icon-gitlab{background-color:#e24329}.elementor-social-icon-globe{background-color:#69727d}.elementor-social-icon-google-plus,.elementor-social-icon-google-plus-g{background-color:#dd4b39}.elementor-social-icon-houzz{background-color:#7ac142}.elementor-social-icon-instagram{background-color:#262626}.elementor-social-icon-jsfiddle{background-color:#487aa2}.elementor-social-icon-link{background-color:#818a91}.elementor-social-icon-linkedin,.elementor-social-icon-linkedin-in{background-color:#0077b5}.elementor-social-icon-medium{background-color:#00ab6b}.elementor-social-icon-meetup{background-color:#ec1c40}.elementor-social-icon-mixcloud{background-color:#273a4b}.elementor-social-icon-odnoklassniki{background-color:#f4731c}.elementor-social-icon-pinterest{background-color:#bd081c}.elementor-social-icon-product-hunt{background-color:#da552f}.elementor-social-icon-reddit{background-color:#ff4500}.elementor-social-icon-rss{background-color:#f26522}.elementor-social-icon-shopping-cart{background-color:#4caf50}.elementor-social-icon-skype{background-color:#00aff0}.elementor-social-icon-slideshare{background-color:#0077b5}.elementor-social-icon-snapchat{background-color:#fffc00}.elementor-social-icon-soundcloud{background-color:#f80}.elementor-social-icon-spotify{background-color:#2ebd59}.elementor-social-icon-stack-overflow{background-color:#fe7a15}.elementor-social-icon-steam{background-color:#00adee}.elementor-social-icon-stumbleupon{background-color:#eb4924}.elementor-social-icon-telegram{background-color:#2ca5e0}.elementor-social-icon-threads{background-color:#000}.elementor-social-icon-thumb-tack{background-color:#1aa1d8}.elementor-social-icon-tripadvisor{background-color:#589442}.elementor-social-icon-tumblr{background-color:#35465c}.elementor-social-icon-twitch{background-color:#6441a5}.elementor-social-icon-twitter{background-color:#1da1f2}.elementor-social-icon-viber{background-color:#665cac}.elementor-social-icon-vimeo{background-color:#1ab7ea}.elementor-social-icon-vk{background-color:#45668e}.elementor-social-icon-weibo{background-color:#dd2430}.elementor-social-icon-weixin{background-color:#31a918}.elementor-social-icon-whatsapp{background-color:#25d366}.elementor-social-icon-wordpress{background-color:#21759b}.elementor-social-icon-x-twitter{background-color:#000}.elementor-social-icon-xing{background-color:#026466}.elementor-social-icon-yelp{background-color:#af0606}.elementor-social-icon-youtube{background-color:#cd201f}.elementor-social-icon-500px{background-color:#0099e5}.elementor-shape-rounded .elementor-icon.elementor-social-icon{border-radius:10%}.elementor-shape-circle .elementor-icon.elementor-social-icon{border-radius:50%}</style>		<div class="elementor-social-icons-wrapper elementor-grid">
							<span class="elementor-grid-item">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-repeater-item-945024c" target="_blank">
						<span class="elementor-screen-only">Facebook</span>
						<svg class="e-font-icon-svg e-fab-facebook" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg>					</a>
				</span>
							<span class="elementor-grid-item">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-twitter elementor-repeater-item-07ddb98" target="_blank">
						<span class="elementor-screen-only">Twitter</span>
						<svg class="e-font-icon-svg e-fab-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>					</a>
				</span>
							<span class="elementor-grid-item">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-youtube elementor-repeater-item-aea6e27" target="_blank">
						<span class="elementor-screen-only">Youtube</span>
						<svg class="e-font-icon-svg e-fab-youtube" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg>					</a>
				</span>
					</div>
				</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/glitchqq\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>

<aside id="moove_gdpr_cookie_info_bar" class="moove-gdpr-info-bar-hidden moove-gdpr-align-center moove-gdpr-dark-scheme gdpr_infobar_postion_bottom" aria-label="GDPR Cookie Banner" style="display: none;">
    <div class="moove-gdpr-info-bar-container">
      <div class="moove-gdpr-info-bar-content">
        
<div class="moove-gdpr-cookie-notice">
  <p>We are using cookies to give you the best experience on our website.</p><p>You can find out more about which cookies we are using or switch them off in <button  data-href="#moove_gdpr_cookie_modal" class="change-settings-button">settings</button>.</p></div>
        
<div class="moove-gdpr-button-holder">
		  <button class="mgbutton moove-gdpr-infobar-allow-all gdpr-fbo-0" aria-label="Accept" >Accept</button>
	  </div>
      </div>
      
    </div>
    
  </aside>
  
  
			<script type='text/javascript'>
				const lazyloadRunObserver = () => {
					const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
					const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
						entries.forEach( ( entry ) => {
							if ( entry.isIntersecting ) {
								let lazyloadBackground = entry.target;
								if( lazyloadBackground ) {
									lazyloadBackground.classList.add( 'e-lazyloaded' );
								}
								lazyloadBackgroundObserver.unobserve( entry.target );
							}
						});
					}, { rootMargin: '200px 0px 200px 0px' } );
					lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
						lazyloadBackgroundObserver.observe( lazyloadBackground );
					} );
				};
				const events = [
					'DOMContentLoaded',
					'elementor/lazyload/observe',
				];
				events.forEach( ( event ) => {
					document.addEventListener( event, lazyloadRunObserver );
				} );
			</script>
			<script id="moove_gdpr_frontend-js-extra">
var moove_frontend_gdpr_scripts = {"ajaxurl":"https:\/\/cupletz.com\/wp-admin\/admin-ajax.php","post_id":"535","plugin_dir":"https:\/\/cupletz.com\/wp-content\/plugins\/gdpr-cookie-compliance","show_icons":"all","is_page":"1","ajax_cookie_removal":"false","strict_init":"1","enabled_default":{"third_party":0,"advanced":0},"geo_location":"false","force_reload":"false","is_single":"","hide_save_btn":"false","current_user":"0","cookie_expiration":"365","script_delay":"2000","close_btn_action":"1","close_btn_rdr":"","scripts_defined":"{\"cache\":true,\"header\":\"\",\"body\":\"\",\"footer\":\"\",\"thirdparty\":{\"header\":\"\",\"body\":\"\",\"footer\":\"\"},\"advanced\":{\"header\":\"\",\"body\":\"\",\"footer\":\"\"}}","gdpr_scor":"true","wp_lang":"","wp_consent_api":"false"};
</script>
<script src="https://cupletz.com/wp-content/plugins/gdpr-cookie-compliance/dist/scripts/main.js?ver=4.15.2" id="moove_gdpr_frontend-js"></script>
<script id="moove_gdpr_frontend-js-after">
var gdpr_consent__strict = "false"
var gdpr_consent__thirdparty = "false"
var gdpr_consent__advanced = "false"
var gdpr_consent__cookies = ""
</script>
<script src="https://cupletz.com/wp-content/plugins/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js?ver=1.2.1" id="smartmenus-js"></script>
<script src="https://cupletz.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.22.0" id="elementor-pro-webpack-runtime-js"></script>
<script src="https://cupletz.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.22.1" id="elementor-webpack-runtime-js"></script>
<script src="https://cupletz.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.22.1" id="elementor-frontend-modules-js"></script>
<script src="https://cupletz.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script>
<script src="https://cupletz.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>
<script id="elementor-pro-frontend-js-before">
var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/cupletz.com\/wp-admin\/admin-ajax.php","nonce":"9b87589af4","urls":{"assets":"https:\/\/cupletz.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/cupletz.com\/wp-json\/"},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/cupletz.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}};
</script>
<script src="https://cupletz.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.22.0" id="elementor-pro-frontend-js"></script>
<script src="https://cupletz.com/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2" id="elementor-waypoints-js"></script>
<script src="https://cupletz.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script>
<script id="elementor-frontend-js-before">
var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselWrapperAriaLabel":"Carousel | Horizontal scrolling: Arrow Left & Right","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.22.1","is_static":false,"experimentalFeatures":{"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"container_grid":true,"e_swiper_latest":true,"e_optimized_control_loading":true,"e_onboarding":true,"theme_builder_v2":true,"home_screen":true,"editor_v2":true,"nested-elements":true,"e_lazyload":true,"display-conditions":true,"form-submissions":true,"mega-menu":true,"taxonomy-filter":true},"urls":{"assets":"https:\/\/cupletz.com\/wp-content\/plugins\/elementor\/assets\/"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":535,"title":"WebTechnik%20%E2%80%93%20Cupletz","excerpt":"","featuredImage":false}};
</script>
<script src="https://cupletz.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.22.1" id="elementor-frontend-js"></script>
<script src="https://cupletz.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.22.0" id="pro-elements-handlers-js"></script>

<div id="moove_gdpr_cookie_modal" class="gdpr_lightbox-hide" role="complementary" aria-label="GDPR Settings Screen">
    <div class="moove-gdpr-modal-content moove-clearfix logo-position-left moove_gdpr_modal_theme_v1">
          
        <button class="moove-gdpr-modal-close" aria-label="Close GDPR Cookie Settings">
          <span class="gdpr-sr-only">Close GDPR Cookie Settings</span>
          <span class="gdpr-icon moovegdpr-arrow-close"></span>
        </button>
            <div class="moove-gdpr-modal-left-content">
        
<div class="moove-gdpr-company-logo-holder">
  <img src="https://cupletz.com/wp-content/plugins/gdpr-cookie-compliance/dist/images/gdpr-logo.png" alt="Cupletz"   width="350"  height="233"  class="img-responsive" />
</div>
        <ul id="moove-gdpr-menu">
          
<li class="menu-item-on menu-item-privacy_overview menu-item-selected">
  <button data-href="#privacy_overview" class="moove-gdpr-tab-nav" aria-label="Privacy Overview">
    <span class="gdpr-nav-tab-title">Privacy Overview</span>
  </button>
</li>

<li class="menu-item-strict-necessary-cookies menu-item-off">
    <button data-href="#strict-necessary-cookies" class="moove-gdpr-tab-nav" aria-label="Strictly Necessary Cookies">
      <span class="gdpr-nav-tab-title">Strictly Necessary Cookies</span>
    </button>
  </li>

</ul>
        
<div class="moove-gdpr-branding-cnt">
  		<a href="https://wordpress.org/plugins/gdpr-cookie-compliance/" rel="noopener noreferrer" target="_blank" class='moove-gdpr-branding'>Powered by  <span>GDPR Cookie Compliance</span></a>
		</div>
      </div>
      
      <div class="moove-gdpr-modal-right-content">
        <div class="moove-gdpr-modal-title">
           
        </div>
        
        <div class="main-modal-content">

<div class="moove-gdpr-tab-content">
            
<div id="privacy_overview" class="moove-gdpr-tab-main">
      <span class="tab-title">Privacy Overview</span>
    <div class="moove-gdpr-tab-main-content">
  	<p>This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.</p>
  	  </div>

</div>
            
  <div id="strict-necessary-cookies" class="moove-gdpr-tab-main" style="display:none">
    <span class="tab-title">Strictly Necessary Cookies</span>
    <div class="moove-gdpr-tab-main-content">
      <p>Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.</p>
      <div class="moove-gdpr-status-bar ">
        <div class="gdpr-cc-form-wrap">
          <div class="gdpr-cc-form-fieldset">
            <label class="cookie-switch" for="moove_gdpr_strict_cookies">    
              <span class="gdpr-sr-only">Enable or Disable Cookies</span>        
              <input type="checkbox" aria-label="Strictly Necessary Cookies"  value="check" name="moove_gdpr_strict_cookies" id="moove_gdpr_strict_cookies">
              <span class="cookie-slider cookie-round" data-text-enable="Enabled" data-text-disabled="Disabled"></span>
            </label>
          </div>
          
        </div>
        
      </div>
      
              <div class="moove-gdpr-strict-warning-message" style="margin-top: 10px;">
          <p>If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.</p>
        </div>
        
                                              
    </div>
    
  </div>
  
            
            
            
          </div>
          
        </div>
        
        <div class="moove-gdpr-modal-footer-content">
          <div class="moove-gdpr-button-holder">
			  		<button class="mgbutton moove-gdpr-modal-allow-all button-visible" aria-label="Enable All">Enable All</button>
		  					<button class="mgbutton moove-gdpr-modal-save-settings button-visible" aria-label="Save Settings">Save Settings</button>
				</div>
        </div>
        
      </div>

</div>
    
  </div>
  
  
	</body>
</html>