/* Fußbereich (Entwurf: branding/header-footer.html). Alle Regeln hängen an .yl-fuss.
   .yl-dunkel am Footer schaltet die Buttons auf ihre Varianten für dunkle Flächen. */

.yl-fuss {
	position: relative;
	overflow: hidden;
	background: var(--yl-navy);
	background-image: linear-gradient(rgba(168, 218, 220, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 218, 220, .06) 1px, transparent 1px);
	background-size: 24px 24px;
	color: rgba(255, 255, 255, .78);
	font-size: 15px;
}
.yl-fuss :where(ul, li, p, dl, dt, dd, h2) { margin: 0; padding: 0; list-style: none; }
.yl-fuss :where(a) { color: inherit; text-decoration: none; }
.yl-fuss :where(a):hover { color: #fff; }
.yl-fuss .yl-wrap { position: relative; }

/* Aufruf */
.yl-fuss .aufruf { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "text knoepfe" "text notiz"; gap: 12px 32px; align-items: center; padding: 56px 0 48px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.yl-fuss .aufruf .text { grid-area: text; }
.yl-fuss .aufruf .knoepfe { grid-area: knoepfe; align-self: end; }
.yl-fuss .aufruf .notiz { grid-area: notiz; align-self: start; }   /* Desktop: Handnotiz unter den Buttons */
.yl-fuss .aufruf h2 { font: 400 26px/1.35 var(--yl-font-kopf); text-transform: uppercase; color: #fff; }
.yl-fuss .aufruf h2 em { font-style: normal; color: var(--yl-orange); }
.yl-fuss .aufruf p { margin-top: 10px; max-width: 560px; }
.yl-fuss .aufruf .knoepfe { display: flex; gap: 16px; align-items: center; }
.yl-fuss .aufruf .notiz { display: block; font: 400 29px var(--yl-font-notiz); color: var(--yl-aqua); transform: rotate(-2deg); }

/* Spalten */
.yl-fuss .spalten { display: grid; grid-template-columns: 1.2fr .9fr .8fr 1.5fr; gap: 40px; padding: 48px 0; }
.yl-fuss .label { display: block; margin-bottom: 16px; font: 400 10px var(--yl-font-kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--yl-aqua); }
.yl-fuss .spalten li { margin-bottom: 8px; }
.yl-fuss .marke img { display: block; height: 15px; width: auto; margin: 16px 0 14px; }
.yl-fuss .marke p { font-size: 14px; max-width: 280px; }
.yl-fuss .yl-siegel { width: 128px; margin: 24px 0 0; }
.yl-fuss .siegel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.yl-fuss .siegel span { padding: 6px 10px; border: 1px dashed rgba(168, 218, 220, .5); font-size: 12px; color: var(--yl-aqua); }
.yl-fuss .datenchip { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; }
.yl-fuss .datenchip dt { font: 400 9px/2.2 var(--yl-font-kopf); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.yl-fuss .datenchip dd { color: #fff; font-weight: 500; }
.yl-fuss .datenchip dd.orange { color: var(--yl-orange); }
.yl-fuss .bauplan { position: absolute; right: -60px; bottom: -40px; width: 460px; opacity: .2; pointer-events: none; }

/* Unterste Zeile */
.yl-fuss .unten { display: flex; gap: 24px; align-items: center; padding: 20px 0 28px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
.yl-fuss .unten nav { margin-left: auto; }
.yl-fuss .unten ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (max-width: 1023px) {
	/* Handy: Notiz unter dem Text, darunter die Buttons */
	.yl-fuss .aufruf { grid-template-columns: 1fr; grid-template-areas: "text" "notiz" "knoepfe"; gap: 16px; padding: 44px 0 36px; }
	.yl-fuss .aufruf h2 { font-size: 20px; }
	.yl-fuss .aufruf .knoepfe { flex-direction: column; align-items: stretch; }
	.yl-fuss .aufruf .yl-knopf { display: flex; width: 100%; }
	.yl-fuss .spalten { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
	.yl-fuss .marke, .yl-fuss .kontakt { grid-column: span 2; }
	.yl-fuss .unten { flex-direction: column; align-items: flex-start; gap: 10px; }
	.yl-fuss .unten nav { margin-left: 0; }
	.yl-fuss .bauplan { width: 300px; right: -80px; }
}