/* Newsletter-Band: Startseite und Fuß aller Unterseiten */
.nlband { position:relative;z-index:2;background:var(--petrol-950);padding-block:26px 32px; }
.nlband__grid { display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-6);align-items:center; }
.nlband__copy { grid-column:span 6;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3); }
.nlband__copy h2 { margin:0;max-width:20ch; }
.nlband__copy .t-body { max-width:46ch; }
.nlband__illu { grid-column:span 6;margin-block:calc(-1 * var(--s-8));margin-inline:0;justify-self:end;width:118%;max-width:660px; }
.nlband__illu img { display:block;width:100%;height:auto; }
.nlform { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2);width:100%;max-width:460px;margin-top:var(--s-3); }
.nlform input { font-family:var(--font-text);font-size:16px;line-height:24px;font-weight:300;color:var(--ink-950); height:56px;padding-inline:var(--s-4);border:1px solid var(--petrol-700);border-radius:var(--r-md);background:var(--paper); }
.nlform input::placeholder { color:var(--petrol-600); }
.nlform input:focus { outline:2px solid var(--petrol-300);outline-offset:2px; }
.nlform .btn { height:56px;padding-inline:var(--s-5); }
.nb { white-space:nowrap; }
.nlhinweis { grid-column:1 / -1;margin:var(--s-1) 0 0;font-size:14px;line-height:20px;color:var(--petrol-200); }

@media (max-width:900px) {
	.nlband__copy,.nlband__illu { grid-column:1 / -1; }
	.nlband__illu { justify-self:center; }
	.nlband__grid { grid-template-columns:1fr;gap:var(--s-4); }
	.nlband__illu { justify-self:center;width:100%;max-width:520px;margin-block:0 calc(-1 * var(--s-6)); }
	.nlband { padding-block:var(--s-6) 0; }
}

@media (max-width:640px) {
	.nlform { grid-template-columns:1fr;max-width:none; }
	.nlform .btn { justify-content:center; }
	.nlband__illu { max-width:100%; }
}

/* Anmeldeformular im Band */
.nlband__copy .nlform { max-width:520px; }
.nlform__falle { position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden; }
.nlform__zustimmung { grid-column:1 / -1;display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s-2);align-items:start;margin:var(--s-1) 0 0;font-size:14px;line-height:20px;color:var(--petrol-200);cursor:pointer; }
.nlform__zustimmung input { height:20px;width:20px;margin:0;padding:0;accent-color:var(--petrol-400); }
.nlform__zustimmung a { color:var(--paper);text-decoration:underline;text-underline-offset:2px; }
.nlform__status { grid-column:1 / -1;margin:0;font-size:15px;line-height:22px;color:var(--petrol-200); }
.nlform__status:empty { display:none; }
.nlform__status.ist-ok { color:var(--paper);padding:var(--s-3) var(--s-4);border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);border-radius:var(--r-md); }
.nlform__status.ist-fehler { color:#ffd9d2; }
.nlform[data-fertig] > :not(.nlform__status) { display:none; }

/* Im Fuß der Unterseiten: eigener Streifen, das Band als dunkle Karte, klar getrennt vom Fuß */
.nlband--fuss { background:transparent;padding-block:var(--s-5) var(--s-8); }
.nlband--fuss .nlband__grid { background:var(--petrol-950);border-radius:var(--r-lg);padding:var(--s-7);overflow:hidden; }
.nlband--fuss .nlband__illu { margin-block:calc(-1 * var(--s-5));width:100%; }
@media (max-width:900px) {
	.nlband--fuss { padding-block:var(--s-6); }
	.nlband--fuss .nlband__grid { padding:var(--s-5) var(--s-4) 0; }
	.nlband--fuss .nlband__illu { margin-block:0;max-width:420px; }
}

/* Illustration als Ebenen. Ruhe: kaum sichtbares Schweben (Blasen, Fische, Pflanzen) in Dauerschleife.
   Bei Eingabe (is-bewegt): volle Bewegung in Schleife, solange getippt wird, Glocke und Strahlen kommen dazu.
   Nach dem Absenden (is-froh): kräftig, zwei Durchläufe. */
.nlband__illu .illu { position:relative;width:100%;container-type:inline-size;--st:1; }
.nlband__illu .illu img { position:absolute;height:auto;max-width:none;display:block;will-change:transform; }
@media (prefers-reduced-motion:no-preference) {
	/* Ruhe: leise Schleife */
	.nlband__illu .illu { --st:.3;--dauer:9s;--glocke:2.4s; }
	.illu__fisch-a { transform-origin:62% 50%;animation:illu-fisch-a var(--dauer) ease-in-out infinite; }
	.illu__fisch-b { transform-origin:40% 50%;animation:illu-fisch-b calc(var(--dauer) * .85) ease-in-out infinite; }
	.illu__pflanzen-links { transform-origin:50% 100%;animation:illu-pflanze calc(var(--dauer) * 1.1) ease-in-out infinite; }
	.illu__pflanzen-rechts { transform-origin:50% 100%;animation:illu-pflanze calc(var(--dauer) * .95) ease-in-out infinite reverse; }
	[class*="illu__blase-"] { animation:illu-blase calc(var(--dauer) * .8) ease-in-out var(--v,0s) infinite; }
	/* Eingabe: volle Bewegung, läuft weiter bis zum Ende des Durchlaufs nach dem letzten Tippen */
	.nlband.is-bewegt .illu { --st:1; }
	.nlband.is-froh .illu { --st:1.9; }
	.nlband.is-bewegt .illu__glocke,.nlband.is-froh .illu__glocke { transform-origin:var(--ox) var(--oy);animation:illu-glocke var(--glocke) ease-in-out infinite; }
	.nlband.is-froh .illu__glocke { animation-iteration-count:2; }
	.nlband.is-bewegt [class*="illu__strahl-"],.nlband.is-froh [class*="illu__strahl-"] { animation:illu-strahl var(--glocke) ease-in-out infinite; }
	.nlband.is-froh [class*="illu__strahl-"] { animation-iteration-count:2; }
	.nlband.is-bewegt .illu__strahl-1,.nlband.is-froh .illu__strahl-1 { --dx:-.7cqw;--dy:-.7cqw; }
	.nlband.is-bewegt .illu__strahl-2,.nlband.is-froh .illu__strahl-2 { --dx:0cqw;--dy:-1cqw;animation-delay:.08s; }
	.nlband.is-bewegt .illu__strahl-3,.nlband.is-froh .illu__strahl-3 { --dx:.9cqw;--dy:-.5cqw;animation-delay:.16s; }
	.nlband.is-froh .illu__fisch-a,.nlband.is-froh .illu__fisch-b,.nlband.is-froh .illu__pflanzen-links,.nlband.is-froh .illu__pflanzen-rechts,.nlband.is-froh [class*="illu__blase-"] { animation-iteration-count:2; }
}
/* Glocke läutet ohne Pause: die Ausschläge klingen ab, dann setzt sie gleich wieder ein */
@keyframes illu-glocke { 0% { transform:rotate(0); } 8% { transform:rotate(calc(5deg * var(--st))); } 18% { transform:rotate(calc(-4deg * var(--st))); } 28% { transform:rotate(calc(3.2deg * var(--st))); } 38% { transform:rotate(calc(-2.6deg * var(--st))); } 48% { transform:rotate(calc(2deg * var(--st))); } 58% { transform:rotate(calc(-1.4deg * var(--st))); } 68% { transform:rotate(calc(.9deg * var(--st))); } 80% { transform:rotate(calc(-.4deg * var(--st))); } 92%,100% { transform:rotate(0); } }
@keyframes illu-strahl { 0%,100% { transform:translate(0,0) scale(1);opacity:1; } 25% { transform:translate(calc(var(--dx) * var(--st)),calc(var(--dy) * var(--st))) scale(1.18);opacity:.55; } 50% { transform:translate(0,0) scale(1);opacity:1; } 75% { transform:translate(calc(var(--dx) * .7 * var(--st)),calc(var(--dy) * .7 * var(--st))) scale(1.12);opacity:.65; } }
@keyframes illu-fisch-a { 0%,100% { transform:translate(0,0) rotate(0); } 30% { transform:translate(calc(.9cqw * var(--st)),calc(-.6cqw * var(--st))) rotate(calc(-1.6deg * var(--st))); } 65% { transform:translate(calc(-.4cqw * var(--st)),calc(.5cqw * var(--st))) rotate(calc(1deg * var(--st))); } }
@keyframes illu-fisch-b { 0%,100% { transform:translate(0,0) rotate(0); } 30% { transform:translate(calc(-1cqw * var(--st)),calc(.6cqw * var(--st))) rotate(calc(2deg * var(--st))); } 65% { transform:translate(calc(.5cqw * var(--st)),calc(-.5cqw * var(--st))) rotate(calc(-1.2deg * var(--st))); } }
@keyframes illu-pflanze { 0%,100% { transform:rotate(0) skewX(0); } 35% { transform:rotate(calc(1.1deg * var(--st))) skewX(calc(-.8deg * var(--st))); } 70% { transform:rotate(calc(-.8deg * var(--st))) skewX(calc(.6deg * var(--st))); } }
@keyframes illu-blase { 0%,100% { transform:translate(0,0); } 35% { transform:translate(calc(.4cqw * var(--st)),calc(-2.4cqw * var(--st))); } 70% { transform:translate(calc(-.3cqw * var(--st)),calc(-1cqw * var(--st))); } }

/* Anmeldeseite: das Band steht im Textteil der Seite und füllt dessen Breite, Bild unter dem Text. */
.rk-text .nlband--fuss { padding-block:var(--s-4) 0; }
.rk-text .nlband .rail { padding-inline:0;max-width:none; }
.rk-text .nlband--fuss .nlband__grid { padding:var(--s-6); }
.rk-text .nlband__copy,.rk-text .nlband__illu { grid-column:1 / -1; }
.rk-text .nlband--fuss .nlband__illu { justify-self:center;max-width:460px;margin-block:var(--s-4) 0; }
.rk-text .nlband__copy h2 { max-width:none; }