/* ============================================================================
   HAUSTIER-ECHO · Footer-Styles
   Einfügen unter: Design › Customizer › Zusätzliches CSS
   (oder ans Ende der style.css deines Child-Themes)
   Alles ist unter .he-footer gescoped -> kollidiert nicht mit SmartMag.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&family=Figtree:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

.he-footer{
  --he-petrol:#16645E;
  --he-petrol-deep:#0E463F;
  --he-honey:#F0A32C;
  --he-honey-soft:#F7C56B;
  --he-fg:#EAF3EF;
  --he-fg-dim:rgba(234,243,239,.64);
  --he-fg-faint:rgba(234,243,239,.42);
  --he-hair:rgba(234,243,239,.14);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--he-petrol-deep);
  color:var(--he-fg);
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.he-footer *{box-sizing:border-box;}
.he-footer ul{list-style:none;margin:0;padding:0;}
.he-footer li{margin:0;padding:0;}
.he-footer a{text-decoration:none;}
.he-inner{max-width:1160px;margin:0 auto;padding:0 24px;}

/* Signature: Echo-Ripple Wasserzeichen */
.he-ripple{position:absolute;z-index:-1;color:var(--he-honey);pointer-events:none;}
.he-ripple svg{display:block;width:100%;height:100%;}
.he-ripple--bl{bottom:-280px;left:-180px;width:660px;height:660px;opacity:.06;}
.he-ripple--tr{top:-300px;right:-220px;width:560px;height:560px;opacity:.045;}

/* Spaltenüberschriften */
.he-h{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.02rem;color:var(--he-fg);margin:0 0 18px;letter-spacing:.01em;}
.he-h::after{content:"";display:block;width:26px;height:2px;background:var(--he-honey);border-radius:2px;margin-top:9px;}

/* ===================== WIDGET 1 · NEWSLETTER ===================== */
.he-newsletter{border-bottom:1px solid var(--he-hair);}
.he-newsletter .he-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:30px 52px;align-items:center;padding-top:46px;padding-bottom:42px;}
.he-nl-head{display:flex;gap:16px;align-items:flex-start;}
.he-nl-mark{flex:0 0 auto;width:46px;height:46px;color:var(--he-honey);}
.he-nl-mark svg{width:100%;height:100%;}
.he-nl-mark .he-pulse{transform-origin:center;animation:he-pulse 2.9s ease-out infinite;}
@keyframes he-pulse{0%{transform:scale(.42);opacity:.7;}70%{opacity:0;}100%{transform:scale(1.45);opacity:0;}}
.he-eyebrow{font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--he-honey);margin:0;}
.he-nl-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(1.25rem,2.4vw,1.6rem);margin:6px 0 6px;color:var(--he-fg);line-height:1.15;}
.he-nl-sub{margin:0;color:var(--he-fg-dim);font-size:.94rem;max-width:48ch;}

.he-form{display:flex;flex-direction:column;gap:11px;}
.he-field{display:flex;gap:10px;}
.he-input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--he-hair);border-radius:12px;padding:13px 15px;color:var(--he-fg);font:inherit;font-size:.94rem;}
.he-input::placeholder{color:var(--he-fg-faint);}
.he-input:focus-visible{outline:2px solid var(--he-honey);outline-offset:2px;border-color:transparent;}
.he-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;line-height:1;text-align:center;text-transform:none;-webkit-appearance:none;appearance:none;background:var(--he-honey);color:#3a2600;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.94rem;border:0;border-radius:12px;padding:13px 24px;cursor:pointer;transition:background .18s ease,transform .12s ease;}
.he-btn:hover{background:var(--he-honey-soft);}
.he-btn:active{transform:translateY(1px);}
.he-btn:focus-visible{outline:2px solid var(--he-fg);outline-offset:2px;}
.he-fine{font-family:'Space Mono',monospace;font-size:.64rem;letter-spacing:.02em;color:var(--he-fg-faint);margin:1px 0 0;line-height:1.55;}
.he-fine a{color:var(--he-fg-dim);}
/* Falls du ein Plugin-Formular nutzt: dezent an die Optik angleichen */
.he-nl-plugin input[type=email],.he-nl-plugin input[type=text]{background:rgba(255,255,255,.06);border:1px solid var(--he-hair);border-radius:12px;padding:13px 15px;color:var(--he-fg);}
.he-nl-plugin input[type=submit],.he-nl-plugin button{background:var(--he-honey);color:#3a2600;border:0;border-radius:12px;padding:13px 24px;font-weight:600;cursor:pointer;}

/* ===================== SPALTEN (Widgets 2–5) ===================== */
.he-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:44px;padding-top:52px;padding-bottom:48px;}

/* WIDGET 2 · Marke & Mission */
.he-col--brand{max-width:36ch;}
.he-logo{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.he-logo-mark{width:42px;height:42px;flex:0 0 auto;}
.he-logo-word{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.34rem;color:var(--he-fg);letter-spacing:.004em;}
.he-slogan{font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.05em;color:var(--he-honey);margin:0 0 14px;}
.he-mission{margin:0 0 22px;color:var(--he-fg-dim);font-size:.92rem;}
.he-social{display:flex;gap:10px;}
.he-social a{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--he-hair);color:var(--he-fg);transition:border-color .18s,color .18s,background .18s,transform .18s;}
.he-social a:hover{border-color:var(--he-honey);color:var(--he-honey);background:rgba(240,163,44,.08);transform:translateY(-2px);}
.he-social a:focus-visible{outline:2px solid var(--he-honey);outline-offset:2px;}
.he-social svg{width:19px;height:19px;}

/* WIDGETS 3–5 · Link-Listen (aus den WP-Menüs) */
.he-list{display:flex;flex-direction:column;gap:11px;}
.he-list a{position:relative;color:var(--he-fg-dim);font-size:.93rem;width:fit-content;transition:color .16s;}
.he-list a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--he-honey);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;}
.he-list a:hover{color:var(--he-fg);}
.he-list a:hover::after{transform:scaleX(1);}
.he-list a:focus-visible{outline:2px solid var(--he-honey);outline-offset:3px;border-radius:2px;color:var(--he-fg);}

/* ===================== SUB-LEISTE ===================== */
.he-subbar{border-top:1px solid var(--he-hair);}
.he-subbar .he-inner{padding-top:22px;padding-bottom:28px;}
.he-disclosure{font-family:'Figtree',sans-serif;font-size:.76rem;color:var(--he-fg-faint);margin:0 0 16px;max-width:96ch;}
.he-disclosure a{color:var(--he-fg-dim);}
.he-subbar-row{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;}
.he-copy{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.04em;color:var(--he-fg-faint);}
.he-legal{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;}
.he-legal a{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.04em;color:var(--he-fg-dim);}
.he-legal a:hover{color:var(--he-honey);}
.he-legal a:focus-visible{outline:2px solid var(--he-honey);outline-offset:3px;}
.he-top{margin-left:auto;font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.06em;color:var(--he-fg-dim);display:inline-flex;align-items:center;gap:6px;}
.he-top:hover{color:var(--he-honey);}
.he-top:focus-visible{outline:2px solid var(--he-honey);outline-offset:3px;}

.he-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1000px){
  .he-cols{grid-template-columns:1fr 1fr;gap:38px 32px;}
  .he-col--brand{grid-column:1 / -1;max-width:54ch;}
  .he-newsletter .he-inner{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:560px){
  .he-cols{grid-template-columns:1fr;}
  .he-field{flex-direction:column;}
  .he-btn{width:100%;}
  .he-subbar-row{flex-direction:column;align-items:flex-start;}
  .he-top{margin-left:0;}
}
@media (prefers-reduced-motion:reduce){
  .he-nl-mark .he-pulse{animation:none;}
  .he-social a,.he-list a::after,.he-btn{transition:none;}
}

/* Den Standard-Footer des Themes blendest du bei Bedarf über die
   Plugin-Einstellungen aus (Einstellungen › Haustier-Echo Footer). */
