@charset "UTF-8";
/* CSS Document */

/* [Claude 2026-09-05] .NewsletterForm* Klassen komplett neu (ersetzt Brevos rohes sib-*-Embed-
   Markup, s. Kommentar in block-newsletter.php) - eigene, schlanke Struktur statt der bisherigen
   ~8 Verschachtelungsebenen, die ausschliesslich fuer Brevos eigenes (im Theme nie eingebundenes)
   JavaScript gedacht waren. .modul-newsletter/.NewsletterModulBox/.NewsletterModul/.item(Col1/2)
   sind unveraendert (Aussenlayout der zwei Spalten Text/Formular). */

.modul-newsletter{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}


.modul-newsletter .NewsletterModulBox{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
}

.modul-newsletter .NewsletterModul{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0px;

	display: grid;
	grid-template-columns: 50% auto;
	grid-auto-rows: auto;
}

.modul-newsletter .NewsletterModul .item{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0px;
}

/* --- Formular --- */

.modul-newsletter .NewsletterForm{
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.78125vw;
	text-align: left;
}
/* [Claude 2026-09-05, Bugfix] "display:flex" oben hat exakt dieselbe Spezifitaet wie die Browser-
   Standardregel "[hidden]{display:none}" - bei gleicher Spezifitaet gewinnt die zuletzt geladene
   Regel, und das ist hier IMMER diese (Theme-CSS laedt nach dem UA-Stylesheet). js/newsletter-form.js
   setzt "form.hidden = true" nach dem Absenden, das Formular blieb dadurch trotzdem sichtbar
   (display:flex gewann). Diese Regel ist spezifischer (Klasse + [hidden]-Attribut zusammen) und
   gewinnt daher zuverlaessig. */
.modul-newsletter .NewsletterForm[hidden]{
	display: none;
}

.modul-newsletter .NewsletterFormRow{
	position: relative;
	width: 100%;
}

/* [Claude 2026-09-05, Kundenwunsch] Abstand ueber dem Button = globales Theme-Padding * 2 (gleiche
   Skala/Variablen wie ueberall im Theme, z.B. .AddElmPad/.pad: --pad-desk/-pad/-phone). */
.modul-newsletter .NewsletterFormSubmitRow{
	margin-top: calc(var(--pad-desk) * 2vw);
}

.modul-newsletter .NewsletterFormInput{
	position: relative;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding-top: 0.78125vw;
	padding-bottom: 0.78125vw;
	/* [Claude 2026-09-05, Kundenwunsch] Innenabstand links/rechts = globales Theme-Padding (gleiche
	   Skala wie ueberall im Theme, s. .NewsletterFormSubmitRow oben), Ober-/Unterabstand bewusst
	   unangetastet. */
	padding-left: calc(var(--pad-desk) * 1vw);
	padding-right: calc(var(--pad-desk) * 1vw);
	border: none;
	border-radius: 90px;
	outline-style: none;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	background: transparent;
	text-align: left;
}

.modul-newsletter .NewsletterFormInput::placeholder{
	text-align: left;
}

/* [Claude 2026-09-05] Eigenes Checkbox-Design (ersetzt Brevos .input_replaced/.checkbox_tick_
   positive) - natives Input unsichtbar, aber weiterhin fokussier-/tastaturbedienbar (kein
   display:none), .NewsletterFormCheckboxMark ist die sichtbare Kreis-Flaeche danach. */
.modul-newsletter .NewsletterFormCheckbox{
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.78125vw;
	cursor: pointer;
}

.modul-newsletter .NewsletterFormCheckboxInput{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}

.modul-newsletter .NewsletterFormCheckboxMark{
	position: relative;
	flex: none;
	width: 1.25vw;
	height: 1.25vw;
	border-radius: 50%;
	border: 2px solid currentColor;
	background-color: transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.modul-newsletter .NewsletterFormCheckboxInput:checked ~ .NewsletterFormCheckboxMark::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5vw;
	height: 0.5vw;
	border-radius: 50%;
	background-color: #fff;
	transform: translate(-50%, -50%);
}

.modul-newsletter .NewsletterFormCheckboxInput:focus-visible ~ .NewsletterFormCheckboxMark{
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.modul-newsletter .NewsletterFormConsentText{
	display: block;
}

.modul-newsletter .NewsletterFormHint{
	margin: 0.5vw 0 0;
	opacity: 0.75;
}

.modul-newsletter .NewsletterFormMessage{
	margin: 0;
}

/* [Claude 2026-09-05] Ziel-Iframe fuer den Formular-Submit (s. js/newsletter-form.js) - unsichtbar,
   aber nicht "display:none" (ein per display:none verstecktes Iframe kann in manchen Browsern das
   "load"-Event, auf das das Script wartet, unzuverlaessig ausloesen). */
.modul-newsletter .NewsletterTargetFrame{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	border: none;
}

/* Honeypot-Feld gegen Spam-Bots (Brevo-Konvention "email_address_check") - bewusst kein
   type="hidden", da simple Bots hidden-Felder oft ueberspringen; per CSS visuell versteckt. */
.modul-newsletter .NewsletterFormHoneypot{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ===================================================================================================================== */
/* ================================================= **** MOBILE **** ================================================== */
/* ===================================================================================================================== */

@media screen and (max-width: 956px) {
.modul-newsletter .NewsletterModul{
	grid-template-columns: 100%;
}

.modul-newsletter .NewsletterForm{
	gap: 3.125vw;
}

.modul-newsletter .NewsletterFormInput{
	padding-top: calc(0.78125vw * 2);
	padding-bottom: calc(0.78125vw * 2);
	padding-left: calc(var(--pad-pad) * 1vw);
	padding-right: calc(var(--pad-pad) * 1vw);
}

.modul-newsletter .NewsletterFormCheckboxMark{
	width: 3.125vw;
	height: 3.125vw;
}

.modul-newsletter .NewsletterFormHint{
	margin-top: 1.5625vw;
}

.modul-newsletter .NewsletterFormSubmitRow{
	margin-top: calc(var(--pad-pad) * 2vw);
}
/* ===================================================================================================================== */
}

@media screen and (max-width: 720px) {
.modul-newsletter .NewsletterFormInput{
	padding-top: calc(0.78125vw * 4);
	padding-bottom: calc(0.78125vw * 4);
	padding-left: calc(var(--pad-phone) * 1vw);
	padding-right: calc(var(--pad-phone) * 1vw);
}

.modul-newsletter .NewsletterFormSubmitRow{
	margin-top: calc(var(--pad-phone) * 2vw);
}

/* ------------------------------------------------------------------------ */
}