/*
Theme Name: Häusliche Alten- und Krankenpflege Viola Hülsmann-Höller — Care Flat
Theme URI: https://hausliche-alten-und-krankenpflege-vi-1.lead.bummeltech.com/
Author: Viola Hülsmann-Höller Pflegedienst
Description: Individuelles, barrierearmes Theme für den ambulanten Pflegedienst Viola Hülsmann-Höller. Design "Care Flat" (Flat Design, ui-ux-pro-max): klare Flächen, ruhiges Pflege-Blau + vertrauensvolles Grün, viel Weißraum, große Schrift. Slider, Leistungen, Unterseiten und alle Texte/Bilder im wp-admin pflegbar.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: hakp-clean
*/

/* =========================================================================
   DESIGN TOKENS  ·  Flat Design / Senior Care  (ui-ux-pro-max)
   Primary/Accent/Muted werden in wp_head aus den Customizer-Theme-Mods
   überschrieben (functions.php → hakp_inline_colors).
   ========================================================================= */
:root{
  --color-primary:#0369A1;        /* ruhiges Pflege-Blau */
  --color-primary-dark:#075985;   /* Hover */
  --color-on-primary:#ffffff;
  --color-secondary:#0C4A6E;      /* tiefes Blau (Überschriften/Flächen) */
  --color-accent:#15803D;         /* vertrauensvolles Grün (Icons/Akzente) */
  --color-accent-dark:#166534;
  --color-on-accent:#ffffff;
  --color-background:#F0F9FF;      /* sehr helles Blau */
  --color-surface:#ffffff;
  --color-foreground:#0C4A6E;     /* Textfarbe */
  --color-text-soft:#3F6079;      /* abgeschwächter Text */
  --color-muted:#E7EFF5;          /* helle Fläche */
  --color-muted-2:#F6FAFD;        /* alternierende Fläche */
  --color-border:#CFE3F1;         /* sichtbare flache Rahmen */
  --color-ring:#0369A1;

  --font-head:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-base:"Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --maxw:1220px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --radius:8px;
  --radius-lg:14px;
  --header-h:84px;
  --t:180ms ease;

  --step--1:clamp(.9rem,.86rem + .2vw,1rem);
  --step-0:clamp(1.02rem,.98rem + .2vw,1.12rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + .9vw,2rem);
  --step-3:clamp(1.95rem,1.6rem + 1.7vw,2.85rem);
  --step-4:clamp(2.4rem,1.85rem + 2.9vw,4rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-base);
  font-size:var(--step-0);
  line-height:1.7;
  color:var(--color-foreground);
  background:var(--color-background);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--color-primary-dark)}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;font-weight:700;letter-spacing:-.01em;margin:0 0 .5em;color:var(--color-secondary)}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px;border-radius:3px}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section--muted{background:var(--color-muted)}
.section--soft{background:var(--color-muted-2)}
.eyebrow{
  display:inline-block;font-family:var(--font-head);font-size:var(--step--1);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.85rem;
}
.section__head{max-width:64ch;margin-bottom:clamp(2rem,5vw,3.25rem)}
.section__head h2{font-size:var(--step-3)}
.section__head p{color:var(--color-text-soft);font-size:var(--step-1);margin-bottom:0}
.section__head--center{margin-inline:auto;text-align:center}
.lead{font-size:var(--step-1);color:var(--color-text-soft)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-primary);color:#fff;padding:.75rem 1rem;z-index:1000}
.skip-link:focus{left:1rem;top:1rem}

/* ---- Buttons (flat) ---- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  font-family:var(--font-head);font-weight:600;font-size:var(--step-0);line-height:1.1;
  padding:.95rem 1.7rem;border-radius:var(--radius);border:2px solid transparent;
  transition:background var(--t),color var(--t),border-color var(--t),opacity var(--t);
}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn--primary{background:var(--color-primary);color:var(--color-on-primary)}
.btn--primary:hover{background:var(--color-primary-dark);color:#fff}
.btn--accent{background:var(--color-accent);color:var(--color-on-accent)}
.btn--accent:hover{background:var(--color-accent-dark);color:#fff}
.btn--ghost{background:transparent;border-color:var(--color-primary);color:var(--color-primary)}
.btn--ghost:hover{background:var(--color-primary);color:#fff}
.btn--on-dark{background:#fff;color:var(--color-primary)}
.btn--on-dark:hover{background:var(--color-muted)}
.btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn--ghost-light:hover{background:#fff;color:var(--color-primary);border-color:#fff}

/* =========================================================================
   HEADER / NAV  — responsive, großzügig, kein Überlauf
   ========================================================================= */
.site-header{
  position:sticky;top:0;z-index:200;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--color-border);
}
.site-header__inner{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  min-height:var(--header-h);
}
.brand{display:flex;align-items:center;margin-right:auto}
.brand a{display:flex;flex-direction:column;line-height:1.15;color:var(--color-secondary)}
.brand strong{font-family:var(--font-head);font-size:clamp(1rem,.9rem + .4vw,1.18rem);letter-spacing:-.01em}
.brand span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);font-weight:700}
.brand img{max-height:52px;width:auto}

.main-nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0;align-items:center}
.main-nav .nav-list > li{position:relative}
.main-nav a{
  display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;font-family:var(--font-head);
  font-weight:600;font-size:1rem;color:var(--color-secondary);border-radius:var(--radius);
  white-space:nowrap;transition:background var(--t),color var(--t);
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current-menu-parent > a,
.main-nav .current_page_item > a,
.main-nav .current_page_ancestor > a{background:var(--color-muted);color:var(--color-primary)}

/* Dropdown (Untermenü, z. B. Leistungen) */
.main-nav .sub-menu{
  position:absolute;top:100%;left:0;min-width:250px;list-style:none;margin:0;padding:.4rem;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;gap:0;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--t),transform var(--t),visibility var(--t);z-index:50;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.main-nav .sub-menu a{font-weight:500;width:100%}
.main-nav .menu-item-has-children > a::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:.15em;margin-top:-.2em}

.header-cta{display:flex;align-items:center;gap:.9rem}
.header-phone{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:700;color:var(--color-secondary);white-space:nowrap}
.header-phone svg{width:1.15em;height:1.15em;color:var(--color-accent)}
.header-phone:hover{color:var(--color-primary)}

.nav-toggle{display:none;background:#fff;border:2px solid var(--color-border);border-radius:var(--radius);
  width:50px;height:48px;cursor:pointer;align-items:center;justify-content:center;color:var(--color-primary)}
.nav-toggle svg{width:26px;height:26px}

/* unter 1100px: Telefonnummer ausblenden, damit die Leiste nicht überläuft */
@media (max-width:1100px){
  .header-phone{display:none}
}

/* unter 900px: echtes Burger-Menü */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .header-cta{margin-left:auto}
  .header-cta .btn{display:none}
  .main-nav{
    position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:#fff;
    border-top:1px solid var(--color-border);overflow-y:auto;
    transform:translateX(100%);transition:transform 220ms ease;visibility:hidden;
  }
  .main-nav.is-open{transform:translateX(0);visibility:visible}
  .main-nav ul.nav-list{flex-direction:column;align-items:stretch;gap:0;padding:1rem var(--gut) 2rem}
  .main-nav .nav-list > li{border-bottom:1px solid var(--color-border)}
  .main-nav a{padding:1.05rem .25rem;font-size:1.15rem}
  .main-nav .menu-item-has-children > a::after{margin-left:auto}
  .main-nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;border:none;border-radius:0;
    padding:0 0 .6rem 1rem;min-width:0;
  }
  .main-nav .sub-menu a{padding:.7rem .25rem;font-size:1.02rem;color:var(--color-text-soft)}
  .mobile-cta{display:block;margin-top:1.4rem}
  .mobile-cta .btn{width:100%;justify-content:center}
}
@media (min-width:901px){.mobile-cta{display:none}}

/* =========================================================================
   HERO + SLIDER
   ========================================================================= */
.hero{position:relative}
.slider{position:relative;overflow:hidden}
.slider__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.slider__track::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:start;min-height:clamp(480px,74vh,720px);display:flex}
.slide__media{position:absolute;inset:0}
.slide__media img{width:100%;height:100%;object-fit:cover}
.slide__media::after{content:"";position:absolute;inset:0;background:rgba(8,47,73,.6)}
.slide__inner{position:relative;z-index:2;align-self:center;width:100%;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);color:#fff}
.slide__inner .box{max-width:660px}
.slide .eyebrow{color:#bbf7d0}
.slide h1,.slide h2{color:#fff;font-size:var(--step-4);margin-bottom:.35em}
.slide p{font-size:var(--step-1);color:rgba(255,255,255,.94);max-width:54ch}
.slide__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.7rem}

.slider__dots{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.5rem;z-index:5}
.slider__dots button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;
  cursor:pointer;padding:0;transition:background var(--t),transform var(--t)}
.slider__dots button[aria-current="true"]{background:#fff;transform:scale(1.2)}
.slider__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:54px;height:54px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;transition:background var(--t),border-color var(--t)}
.slider__arrow:hover{background:#fff;border-color:var(--color-primary)}
.slider__arrow svg{width:26px;height:26px}
.slider__arrow--prev{left:clamp(.6rem,2vw,1.6rem)}
.slider__arrow--next{right:clamp(.6rem,2vw,1.6rem)}
@media (max-width:640px){.slider__arrow{display:none}}

/* hero fallback when no slides */
.hero--static{background:var(--color-secondary);color:#fff}
.hero--static .box{max-width:660px;padding-block:clamp(4rem,12vw,8rem)}
.hero--static h1{color:#fff;font-size:var(--step-4)}
.hero--static p{font-size:var(--step-1);color:rgba(255,255,255,.92)}

/* ---- quick contact strip ---- */
.quickbar{background:var(--color-secondary);color:#fff}
.quickbar__inner{display:flex;flex-wrap:wrap;gap:.85rem 2.5rem;padding-block:1.05rem;align-items:center;justify-content:space-between}
.quickbar a,.quickbar span{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--step--1);font-weight:600;color:#fff}
.quickbar svg{width:1.2em;height:1.2em;color:#bbf7d0;flex:none}
.quickbar a:hover{color:#bbf7d0}

/* =========================================================================
   SPLIT (About / Karriere)
   ========================================================================= */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.split__media{position:relative}
.split__media img{border-radius:var(--radius-lg);width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--color-border)}
.split__media .badge{position:absolute;left:-12px;bottom:-12px;background:var(--color-accent);color:#fff;
  padding:1rem 1.3rem;border-radius:var(--radius-lg);max-width:240px}
.split__media .badge strong{display:block;font-family:var(--font-head);font-size:1.6rem;line-height:1.05}
.split__media .badge span{font-size:.85rem}
.split h2{font-size:var(--step-3)}
.checklist{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.85rem}
.checklist li{display:flex;gap:.7rem;align-items:flex-start}
.checklist svg{width:1.5em;height:1.5em;color:var(--color-accent);flex:none;margin-top:.05em}

/* =========================================================================
   SERVICES GRID (cards, flat)
   ========================================================================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.5rem}
.card{
  display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--t),background var(--t);
}
.card:hover{border-color:var(--color-primary)}
.card__media{aspect-ratio:16/10;overflow:hidden;background:var(--color-muted)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 300ms ease}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:1.6rem;display:flex;flex-direction:column;flex:1}
.card__icon{width:48px;height:48px;border-radius:var(--radius);background:var(--color-muted);
  display:flex;align-items:center;justify-content:center;color:var(--color-accent);margin-bottom:1rem}
.card__icon svg{width:28px;height:28px}
.card h3{font-size:var(--step-1)}
.card__body p{color:var(--color-text-soft);font-size:var(--step-0);margin-bottom:1.1rem}
.card__link{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-head);
  font-weight:600;color:var(--color-primary)}
.card__link svg{width:1.1em;height:1.1em;transition:transform var(--t)}
.card:hover .card__link svg{transform:translateX(3px)}
.card--link{text-decoration:none}

/* =========================================================================
   STEPS / Ablauf
   ========================================================================= */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;counter-reset:step}
.step{padding:1.8rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-head);font-size:2.6rem;font-weight:700;
  color:var(--color-primary);opacity:.25;line-height:1;display:block;margin-bottom:.5rem}
.step h3{font-size:var(--step-1)}
.step p{color:var(--color-text-soft);margin-bottom:0}

/* =========================================================================
   CTA band (flat)
   ========================================================================= */
.ctaband{background:var(--color-primary);color:#fff;border-radius:var(--radius-lg)}
.ctaband__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;
  padding:clamp(2rem,5vw,3.25rem)}
.ctaband h2{color:#fff;font-size:var(--step-2);margin:0}
.ctaband p{color:rgba(255,255,255,.9);margin:.4rem 0 0;max-width:50ch}

/* =========================================================================
   CONTACT + CAREER
   ========================================================================= */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem)}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
.info-list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1.2rem}
.info-list li{display:flex;gap:.9rem;align-items:flex-start}
.info-list .ic{width:46px;height:46px;border-radius:var(--radius);background:var(--color-muted);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--color-accent)}
.info-list .ic svg{width:24px;height:24px}
.info-list strong{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-soft);font-family:var(--font-head)}
.info-list a,.info-list .val{font-size:var(--step-1);font-weight:600;color:var(--color-secondary)}
.info-list a:hover{color:var(--color-primary)}
.form-wrap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(1.5rem,4vw,2.5rem)}
.form-wrap h3{font-size:var(--step-2)}

/* generische Formular-Styles (Kontaktformular / Karriere-Plugin) */
.form-wrap input[type=text],.form-wrap input[type=email],.form-wrap input[type=tel],
.form-wrap input[type=number],.form-wrap input[type=url],.form-wrap input[type=date],
.form-wrap select,.form-wrap textarea{
  width:100%;font:inherit;color:var(--color-foreground);background:#fff;
  border:2px solid var(--color-border);border-radius:var(--radius);padding:.8rem .95rem;margin-bottom:1rem;
  transition:border-color var(--t),box-shadow var(--t);
}
.form-wrap textarea{min-height:140px;resize:vertical}
.form-wrap input:focus,.form-wrap select:focus,.form-wrap textarea:focus{
  outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(3,105,161,.18)}
.form-wrap label{font-weight:600;font-size:var(--step--1);display:block;margin-bottom:.35rem}
.form-wrap button,.form-wrap input[type=submit]{
  cursor:pointer;font:inherit;font-family:var(--font-head);font-weight:600;background:var(--color-accent);color:#fff;border:none;
  padding:.9rem 1.7rem;border-radius:var(--radius);transition:background var(--t)}
.form-wrap button:hover,.form-wrap input[type=submit]:hover{background:var(--color-accent-dark)}

/* =========================================================================
   PAGE (generisch) + Unterseiten-Bausteine
   ========================================================================= */
.page-hero{background:var(--color-secondary);color:#fff;padding-block:clamp(3rem,7vw,5rem)}
.page-hero h1{color:#fff;font-size:var(--step-3);margin-bottom:.25em}
.page-hero p{color:rgba(255,255,255,.9);font-size:var(--step-1);max-width:62ch;margin:0}
.breadcrumb{font-size:var(--step--1);color:rgba(255,255,255,.8);margin-bottom:.9rem}
.breadcrumb a{color:#bbf7d0}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{opacity:.6;margin-inline:.4rem}
.entry{max-width:75ch}
.entry h2{font-size:var(--step-2);margin-top:1.6em}
.entry h3{font-size:var(--step-1);margin-top:1.4em}
.entry ul{padding-left:1.2rem}
.entry li{margin-bottom:.4rem}
.entry img{border-radius:var(--radius-lg);margin-block:1.5rem;border:1px solid var(--color-border)}
.entry a{text-decoration:underline;text-underline-offset:3px}

/* Leistungs-Detail Layout */
.detail-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media (max-width:880px){.detail-grid{grid-template-columns:1fr}}
.detail-media img{border-radius:var(--radius-lg);width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--color-border);margin-bottom:1.5rem}
.aside-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.6rem;position:sticky;top:calc(var(--header-h) + 1rem)}
.aside-card h3{font-size:var(--step-1)}
.aside-card .info-list{margin-top:1rem}
.aside-card .btn{width:100%;justify-content:center;margin-top:1.2rem}
.related-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.related-list a{display:flex;align-items:center;gap:.5rem;padding:.6rem .7rem;border-radius:var(--radius);background:var(--color-muted-2);font-weight:600;color:var(--color-secondary)}
.related-list a:hover{background:var(--color-muted);color:var(--color-primary)}
.related-list svg{width:1.1em;height:1.1em;color:var(--color-accent);flex:none}
.backlink{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-head);font-weight:600;margin-top:2rem}

/* Werte-/Feature-Grid (Über uns) */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1rem}
.feature{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.7rem}
.feature__icon{width:48px;height:48px;border-radius:var(--radius);background:var(--color-muted);display:flex;align-items:center;justify-content:center;color:var(--color-accent);margin-bottom:1rem}
.feature__icon svg{width:28px;height:28px}
.feature h3{font-size:var(--step-1)}
.feature p{color:var(--color-text-soft);margin-bottom:0}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--color-secondary);color:rgba(255,255,255,.82);padding-block:clamp(3rem,6vw,4.5rem) 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:2.5rem}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:2rem}}
.site-footer h4{color:#fff;font-family:var(--font-head);font-size:1.1rem;margin-bottom:1rem}
.site-footer .brand strong{color:#fff}
.site-footer .brand span{color:#bbf7d0}
.site-footer a{color:rgba(255,255,255,.82)}
.site-footer a:hover{color:#fff}
.footer-menu{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer-contact{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.footer-contact li{display:flex;gap:.6rem;align-items:flex-start}
.footer-contact svg{width:1.15em;height:1.15em;color:#bbf7d0;flex:none;margin-top:.25em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:2.5rem;padding-block:1.4rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:var(--step--1)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}