/* ==========================================================================
   site-chrome.css — Header und Footer der beiden Seiten-Templates.

   Einzige Quelle für das Chrome-CSS. Das Markup dazu steht in _partials/
   und wird von _deploy/partials.py in die Seiten geschrieben.

   Bewusst mit Hex-Werten statt CSS-Variablen: die Seiten definieren
   unterschiedliche Variablennamen für dieselben Markenfarben
   (--velvet / --accent, --sunshine / --sun). Hex hält das Stylesheet
   überall gleich gültig.

   Velvet Green #02322E · Sunshine #F7B240 · Paper #faf8f4 · Rule #e2e0d9
   ========================================================================== */

/* ── SITE-TEMPLATE · Header ───────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:#faf8f4;border-bottom:1px solid #e2e0d9;}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;max-width:1240px;margin:0 auto;gap:32px;}
.nav .brand{display:flex;align-items:center;gap:0;border:0}
.nav .brand img.logo{height:32px;width:auto;display:block}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:13px;color:#3a3a3a;font-weight:500;letter-spacing:0.04em;text-decoration:none;border:0}
.nav-links a:hover{color:#02322E}
.nav-cta{background:#02322E;color:#fff;padding:10px 20px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;border:1px solid #02322E;transition:background .15s ease;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:#0d3b37;color:#fff}
.nav-burger{display:none;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1.5px solid #c9c6bc;border-radius:4px;cursor:pointer;padding:0;flex-shrink:0;z-index:5;position:relative;}
.nav-burger:hover{border-color:#02322E}
.nav-burger span{display:block;width:20px;height:2px;background:#02322E;border-radius:2px;margin:3px 0;transition:transform 220ms ease,opacity 180ms ease;}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-mobile{display:none;flex-direction:column;padding:8px 20px 22px;background:#faf8f4;border-bottom:1px solid #e2e0d9;gap:2px;}
.nav-mobile[hidden]{display:none !important}
.nav-mobile.open{display:flex}
.nav-mobile a{display:block;padding:14px 4px;font-size:15px;font-weight:500;color:#02322E;letter-spacing:0.01em;border-bottom:1px solid #e2e0d9;text-decoration:none}
.nav-mobile a:last-child{border-bottom:0}
.nav-mobile .nm-cta{margin-top:14px;padding:14px 18px;background:#F7B240;color:#02322E;font-weight:600;letter-spacing:0.04em;text-align:center;border:0;}
@media (max-width:900px){
  .nav-row{padding:14px 20px;gap:12px}
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-burger{display:inline-flex !important}
}

/* ── LANDING-TEMPLATE · Header ────────────────────────────────────────── */
.site-header{background:#02322E;padding:18px 48px}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.header-logo{display:inline-flex;align-items:center;border:0}
.header-logo img{height:26px;width:auto;display:block}
@media (max-width:768px){
  .site-header{padding:16px 22px}
  .header-logo img{height:22px}
}

/* ── Footer · beide Templates ─────────────────────────────────────────── */
footer{background:#02322E;border-top:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.7)}
footer .wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:0;padding:56px 0 48px}
/* Doppelte Klasse: schlägt seitenlokale .ft-grid-Regeln (z. B. im FKR)
   unabhängig von der Ladereihenfolge. */
.ft-grid.ft-grid--landing{grid-template-columns:1.4fr 1.3fr}
.ft-col{padding:0 40px 0 0}
.ft-col:first-child{padding-left:0}
.ft-col:last-child{padding-right:0}
.ft-logo{margin-bottom:16px}
.ft-logo img{height:32px;width:auto;display:block;opacity:0.9}
.ft-tagline{font-size:13px;line-height:1.55;color:rgba(255,255,255,0.55);max-width:240px}
.ft-col-head{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,0.4);margin-bottom:18px}
.ft-nav{display:flex;flex-direction:column;gap:10px}
.ft-nav a{font-size:14px;color:rgba(255,255,255,0.75);text-decoration:none;border:0;transition:color 150ms}
.ft-nav a:hover{color:#fff}
.ft-contact-line{font-size:14px;color:rgba(255,255,255,0.75);margin-bottom:16px;line-height:1.5}
.ft-cta-btn{display:inline-block;padding:10px 20px;border:1.5px solid #F7B240;color:#F7B240;border-radius:3px;font-size:13px;font-weight:600;letter-spacing:0.04em;text-decoration:none;transition:background 150ms,color 150ms}
.ft-cta-btn:hover{background:#F7B240;color:#02322E}
.ft-bar{border-top:1px solid rgba(255,255,255,0.12);padding:20px 0;font-size:11px;color:rgba(255,255,255,0.35);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ft-bar a{color:rgba(255,255,255,0.35);text-decoration:none;border:0}
.ft-bar a:hover{color:rgba(255,255,255,0.7)}
.ft-bar-links{display:flex;gap:20px}
@media (max-width:768px){
  .ft-grid,.ft-grid.ft-grid--landing{grid-template-columns:1fr;gap:40px;padding:44px 0 36px}
  .ft-col{padding:0}
  .ft-bar{flex-direction:column;align-items:flex-start;gap:10px}
  .ft-bar-links{flex-wrap:wrap;gap:12px}
}