/* David Header & Footer - Styles. Mobile First. */

:root{
	--dst-sonic:#2E8FB7;
	--dst-ink:#0e1428;
}

.dst-hf-header *,.dst-hf-footer *{box-sizing:border-box}
.dst-hf-header .dst-wrap,.dst-hf-footer .dst-wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* Full-Bleed: ueber volle Viewport-Breite, unabhaengig vom Theme-Rand. */
.dst-hf-header,.dst-hf-footer{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}

/* HEADER */
.dst-hf-header{background:var(--dst-ink);position:relative;z-index:40}
.dst-hf-header .dst-hd-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.dst-hf-header .dst-logo{display:flex;align-items:center;gap:11px;font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em;color:#fff;text-decoration:none}
.dst-hf-header .dst-mk{width:32px;height:32px;background:var(--dst-sonic);border-radius:9px;display:grid;place-items:center;color:#fff;font-size:17px}
.dst-hf-header .dst-nav a{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:rgba(255,255,255,.75);text-decoration:none;transition:all .18s}
.dst-hf-header .dst-nav a:hover{color:#fff}
.dst-hf-header .dst-nav .dst-cta{background:var(--dst-sonic);color:#fff}

/* Burger */
.dst-hf-header .dst-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:transparent;border:0;cursor:pointer;padding:10px;margin-right:-10px}
.dst-hf-header .dst-burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
.dst-hf-header .dst-burger.dst-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dst-hf-header .dst-burger.dst-open span:nth-child(2){opacity:0}
.dst-hf-header .dst-burger.dst-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile-Nav: standardmaessig eingeklappt (Mobile First) */
.dst-hf-header .dst-nav{position:absolute;top:70px;left:0;right:0;background:var(--dst-ink);border-top:1px solid rgba(255,255,255,.12);flex-direction:column;gap:0;padding:8px 20px 20px;display:none}
.dst-hf-header .dst-nav.dst-open{display:flex}
.dst-hf-header .dst-nav a{padding:14px 4px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.dst-hf-header .dst-nav a:last-child{border-bottom:0}
.dst-hf-header .dst-nav .dst-cta{margin-top:12px;text-align:center;padding:14px;border-radius:100px}

/* FOOTER */
.dst-hf-footer{background:var(--dst-ink);color:#fff;padding:48px 0 36px;font-family:'Inter',sans-serif}
.dst-hf-footer .dst-ft-grid{display:grid;grid-template-columns:1fr;gap:26px;margin-bottom:40px}
.dst-hf-footer .dst-ft-logo{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:800;font-size:24px}
.dst-hf-footer .dst-ft-logo span{color:var(--dst-sonic)}
.dst-hf-footer .dst-ft-desc{color:rgba(255,255,255,.55);font-size:15px;max-width:34ch;line-height:1.6;margin-top:14px}
.dst-hf-footer .dst-ft-col h4{font-family:'Space Mono',monospace;font-size:12px;color:var(--dst-sonic);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.dst-hf-footer .dst-ft-col a{display:block;color:rgba(255,255,255,.65);font-size:15px;padding:6px 0;text-decoration:none;transition:color .2s}
.dst-hf-footer .dst-ft-col a:hover{color:#fff}
.dst-hf-footer .dst-ft-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,.5)}

@media (min-width:600px){
	.dst-hf-header .dst-wrap,.dst-hf-footer .dst-wrap{padding:0 32px}
}
@media (min-width:820px){
	.dst-hf-header .dst-wrap,.dst-hf-footer .dst-wrap{padding:0 40px}
	.dst-hf-header .dst-burger{display:none}
	.dst-hf-header .dst-nav{position:static;background:transparent;border:0;flex-direction:row;gap:4px;padding:0;display:flex;align-items:center}
	.dst-hf-header .dst-nav a{padding:9px 14px;font-size:14px;border:0;border-radius:100px}
	.dst-hf-header .dst-nav a:hover{background:rgba(255,255,255,.1)}
	.dst-hf-header .dst-nav .dst-cta{margin-top:0;padding:9px 18px}
	.dst-hf-header .dst-nav .dst-cta:hover{filter:brightness(1.12);background:var(--dst-sonic)}
	.dst-hf-footer .dst-ft-grid{grid-template-columns:2fr 1fr 1fr;gap:40px}
}