/*
Theme Name: strom-bernhardt-hamburg
Theme URI: https://strom-bernhardt-hamburg.de
Description: Bespoke classic WordPress theme for Strom Bernhardt (Elektriker, Hamburg). Style elektro-volt — deep navy + electric-yellow-fill, sharp 0-radius UI, giant two-tone display heroes. Telefon-only (kein Formular), System-Schriftstapel, JSON-LD (Electrician/BreadcrumbList/FAQPage), WCAG 2.1 AA / BFSG. Content provisions on theme activation.
Author: Strom Bernhardt
Version: 1.0.0
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: strom-bernhardt-hamburg
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1.  Design tokens (:root)
   2.  Reset & base
   3.  Icon system (CSS mask, colourable via currentColor)
   4.  Buttons
   5.  Eyebrow, section heads, layout primitives (wrap / grid / split)
   6.  Section bands
   7.  Topbar, header, navigation (incl. mobile drawer + keyboard submenu)
   8.  Breadcrumbs
   9.  Hero (7 variants)
   10. Trust strip
   11. Card grid
   12. Icon badges
   13. Process steps (horizontal + vertical)
   14. Checklist / icon list
   15. Chip cluster
   16. Notice band (danger / info)
   17. FAQ accordion
   18. CTA band
   19. Phone block
   20. Feature split / contrast pair / prose lead
   21. USP panel
   22. Image placeholder (imgph)
   23. Sticky call bar
   24. Scroll-to-top
   25. Footer
   26. Focus-visible & accessibility helpers
   27. Reveal animation + reduced motion
   28. Responsive
   ========================================================================== */

/* ==== 1. Design tokens ==== */
:root{
  /* Brand navy — 15.4:1 on white (headings, body-adjacent text, phone CTA, dark bands) */
  --brand:#00254a;
  --brand-600:#013a70;
  --brand-700:#001c39;
  --brand-900:#00152b;
  /* Electric yellow — 1.39:1 on white: FILL ONLY, never text/link/focus-ring on a light bg.
     11.1:1 on --brand, 13.4:1 on --dark: yellow AS TEXT is fine on a dark/navy band. */
  --accent:#fed829;
  --accent-600:#f3c800;
  --on-accent:#111111; /* 13.7:1 on --accent — every yellow surface carries this ink */

  --ink:#141a22;
  --head:#1c2129;    /* ~16.2:1 on white — headings */
  --text:#545c66;    /* 6.8:1 on white — body */
  --muted:#656f7c;    /* 5.1:1 on white — secondary text */

  --bg:#ffffff;
  --tint:#f4f5f8;
  --tint2:#f6f5fb;
  --line:#e4e7ee;
  --line2:#d5dae4;

  --dark:#0b1220;      /* near-black band */
  --dark2:#111a2b;
  --dark-line:#22304a;
  --dark-muted:#9fb0c9; /* 8.6:1 on --dark */

  --danger:#b3261e;    /* 5.9:1 on white — reserved for the notice/danger band ink, never decorative */
  --ok:#1a7f45;

  --r:0px; --r-sm:3px; --r-card:10px; --pill:999px;
  --sh-card:0 0 50px rgba(5,5,5,.08);
  --sh-card-h:0 0 50px rgba(5,5,5,.17);
  --sh-soft:0 3px 15px rgba(0,0,0,.10);
  --sh-lift:0 18px 40px rgba(0,37,74,.20);

  --c:1440px;
  --c-narrow:760px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* System stack only — elektro-volt's own reference deliberately uses no self-hosted font,
     so the theme stays render-blocking-free. See style-library/elektro-volt/design.md. */
  --f:'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ==== 2. Reset & base ==== */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f);font-size:18px;line-height:1.8;color:var(--text);background:var(--bg);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600)}
h1,h2,h3,h4,h5{font-family:var(--f);color:var(--head);line-height:1.18;font-weight:800;margin:0;overflow-wrap:break-word}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:14px 20px;z-index:400;font-weight:700}
.skip:focus{left:8px;top:8px;color:#fff}
.wrap{width:min(100% - 36px,var(--c));margin-inline:auto}
.wrap--narrow{width:min(100% - 36px,var(--c-narrow))}

/* ==== 3. Icon system (CSS mask, colourable via currentColor) ====
   Every icon is a <span class="ico ico--KEY" aria-hidden="true"></span>. No icon font, no
   sprite sheet: each variant masks a small inline SVG (white shape) with currentColor, so an
   icon always matches its surrounding text/fill colour for free, in either theme band.
   Vocabulary: phone, check, shield, shield-check, clock, pin, bolt, panel, wiring, search,
   bulb, plug, warning, arrow-right, arrow-up, close, list, document, people, info. */
.ico{
  display:inline-block;flex:none;width:1.15em;height:1.15em;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.ico--phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h4l2 5-3 2a13 13 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 4 5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h4l2 5-3 2a13 13 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 4 5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E")}
.ico--check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E")}
.ico--shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6l7-3Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6l7-3Z'/%3E%3C/svg%3E")}
.ico--shield-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6l7-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6l7-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.ico--clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.ico--pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
.ico--bolt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='none'%3E%3Cpath d='M13 2 4.5 13.2c-.4.5 0 1.3.7 1.3H10l-1 7.5 8.5-11.2c.4-.5 0-1.3-.7-1.3H12l1-7.5Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='none'%3E%3Cpath d='M13 2 4.5 13.2c-.4.5 0 1.3.7 1.3H10l-1 7.5 8.5-11.2c.4-.5 0-1.3-.7-1.3H12l1-7.5Z'/%3E%3C/svg%3E")}
.ico--panel{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M8 8v8M12 8v8M16 8v8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M8 8v8M12 8v8M16 8v8'/%3E%3C/svg%3E")}
.ico--wiring{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h5l2-5 4 10 2-5h5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h5l2-5 4 10 2-5h5'/%3E%3C/svg%3E")}
.ico--search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E")}
.ico--bulb{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3 11v1h6v-1a6 6 0 0 0-3-11Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3 11v1h6v-1a6 6 0 0 0-3-11Z'/%3E%3C/svg%3E")}
.ico--plug{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V7a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v13'/%3E%3Cpath d='M4 20h12M15 11h3v5a2 2 0 0 0 2 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V7a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v13'/%3E%3Cpath d='M4 20h12M15 11h3v5a2 2 0 0 0 2 2'/%3E%3C/svg%3E")}
.ico--warning{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3Z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3Z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E")}
.ico--arrow-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.ico--arrow-up{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6M6 12l6-6 6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6M6 12l6-6 6 6'/%3E%3C/svg%3E")}
.ico--close{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.ico--list{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3C/svg%3E")}
.ico--document{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v9H4z'/%3E%3Cpath d='M8 19h8M12 14v5'/%3E%3Cpath d='M8 9h2M14 9h2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v9H4z'/%3E%3Cpath d='M8 19h8M12 14v5'/%3E%3Cpath d='M8 9h2M14 9h2'/%3E%3C/svg%3E")}
.ico--people{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-2a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-2a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
.ico--info{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7h.01'/%3E%3C/svg%3E")}
.ico--photo{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E")}

/* ==== 4. Buttons (sharp — the signature) ==== */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:var(--r);
  min-height:44px;padding:16px 34px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  cursor:pointer;transition:color .4s var(--ease),box-shadow .4s var(--ease);z-index:0}
.btn span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px}
.btn::before{content:"";position:absolute;inset:0;z-index:1;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn .ico{width:17px;height:17px}
.btn--accent{background:var(--accent);color:var(--on-accent)}
.btn--accent::before{background:var(--brand)}
.btn--accent:hover{color:#fff;box-shadow:var(--sh-lift)}
.btn--brand{background:var(--brand);color:#fff}
.btn--brand::before{background:var(--accent)}
.btn--brand:hover{color:var(--on-accent)}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn--ghost::before{background:#fff}
.btn--ghost:hover{color:var(--brand)}
.btn--sm{padding:11px 24px;font-size:13px}
.btn--lg{padding:20px 46px;font-size:15px}
.btn--xl{padding:23px 52px;font-size:16px}
.btn--block{width:100%;justify-content:center}

/* ==== 5. Eyebrow, section heads, layout primitives ==== */
.eyebrow{display:inline-block;position:relative;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);border:3px solid var(--line);padding:3px 22px;line-height:26px;margin-bottom:16px;background:#fff}
.eyebrow .bolt{position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:18px;height:18px;background:#fff;padding:0 2px;display:inline-flex;align-items:center;justify-content:center}
.eyebrow .bolt .ico{width:13px;height:13px;color:var(--brand)}
.eyebrow.left{padding-left:56px;border:0;background:transparent;line-height:1.5}
.eyebrow.left::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:43px;height:5px;border-radius:5px;background:var(--brand)}
.eyebrow.on-dark{color:#fff;border-color:var(--dark-line);background:transparent}
.eyebrow.on-dark .bolt{background:transparent}
.eyebrow.on-dark .bolt .ico{color:var(--accent)}
.eyebrow.left.on-dark::before{background:var(--accent)}
.eyebrow--fill{border:0;background:var(--accent);color:var(--on-accent);padding:8px 20px 6px}
.eyebrow--fill .bolt{display:none}
/* Contextual theming: an eyebrow placed on a dark/navy band re-themes itself automatically
   (white text, dark-line border, accent bolt) — callers never pass an "on-dark" flag. */
.hero--dark .eyebrow,.hero--panel .eyebrow,.hero--compact .eyebrow,.hero--onblack .eyebrow,
.section--dark .eyebrow,.section--brand .eyebrow,.ctaband .eyebrow{color:#fff;border-color:var(--dark-line);background:transparent}
.hero--dark .eyebrow .bolt,.hero--panel .eyebrow .bolt,.hero--compact .eyebrow .bolt,.hero--onblack .eyebrow .bolt,
.section--dark .eyebrow .bolt,.section--brand .eyebrow .bolt,.ctaband .eyebrow .bolt{background:transparent}
.hero--dark .eyebrow .bolt .ico,.hero--panel .eyebrow .bolt .ico,.hero--compact .eyebrow .bolt .ico,.hero--onblack .eyebrow .bolt .ico,
.section--dark .eyebrow .bolt .ico,.section--brand .eyebrow .bolt .ico,.ctaband .eyebrow .bolt .ico{color:var(--accent)}
.hero--dark .eyebrow.left::before,.hero--panel .eyebrow.left::before,.hero--compact .eyebrow.left::before,.hero--onblack .eyebrow.left::before,
.section--dark .eyebrow.left::before,.section--brand .eyebrow.left::before,.ctaband .eyebrow.left::before{background:var(--accent)}

.stitle{font-size:clamp(29px,4.1vw,50px);line-height:1.16;letter-spacing:-.01em;color:var(--head);font-weight:800;max-width:20ch}
.stitle.on-dark{color:#fff}
.lead{margin-top:14px;max-width:62ch;color:var(--text)}
.lead.on-dark{color:var(--dark-muted)}
.shead{margin-bottom:44px}
.shead.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.shead.center .stitle{max-width:24ch}
.shead.split{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:end}

.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:1.05fr .95fr}

/* ==== 6. Section bands ==== */
.section{padding:clamp(64px,8vw,112px) 0}
.section--tint{background:var(--tint)}
.section--tint2{background:var(--tint2)}
.section--dark{background:var(--dark);color:var(--dark-muted)}
.section--dark h2,.section--dark h3{color:#fff}
.section--brand{background:var(--brand);color:#cfe0f2}
.section--brand h2,.section--brand h3{color:#fff}

/* ==== 7. Topbar, header, navigation ==== */
.topbar{background:var(--brand-700);color:#b9cee4;font-size:13.5px}
.topbar .wrap{display:flex;gap:26px;align-items:center;justify-content:space-between;min-height:44px;flex-wrap:wrap;padding-block:6px}
.topbar ul{display:flex;gap:24px;flex-wrap:wrap}
.topbar li{display:flex;align-items:center;gap:8px}
.topbar .ico{width:14px;height:14px;color:var(--accent)}
.topbar a{color:#dbe8f6}
.topbar a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
.topbar a:hover{color:var(--accent)}

header{position:sticky;top:0;z-index:120;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.stuck{box-shadow:0 10px 30px rgba(5,5,5,.09)}
.nav-row{position:relative;display:flex;align-items:center;gap:22px;min-height:82px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;color:var(--head);letter-spacing:-.01em;line-height:1.15}
.brand .mk{display:grid;place-items:center;width:44px;height:44px;background:var(--brand);color:var(--accent);flex:none}
.brand .mk .ico{width:24px;height:24px}
.brand small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* One <nav> element serves BOTH breakpoints — no duplicate "Hauptnavigation" landmark.
   Desktop: inline row with hover/focus dropdowns. Mobile: the burger toggles `.open` on
   this same element and CSS turns it into a full-width panel under the header. */
.menu-nav{margin-left:auto}
.menu{display:flex;gap:8px;align-items:center}
.menu li{position:relative;display:flex;align-items:center;flex-wrap:wrap}
/* .menu li's own flex-wrap exists so the mobile open-submenu row can wrap onto a second line
   (link+arrow, then the full-width submenu below it) — see the has-submenu override inside the
   760px media query. On desktop that same wrap lets the arrow button drop below the link
   whenever the nav row is tight for space, since the icon-only button shrinks to (near) nothing
   before the link's text does. Pin it to nowrap on desktop; the mobile query re-enables wrap. */
.menu-item.has-submenu{flex-wrap:nowrap}
.menu>li>a,.menu>li>.menu-parent{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--head);position:relative;padding:10px 12px;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.menu>li>a::after,.menu>li>.menu-parent::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.menu>li>a:hover::after,.menu>li>a[aria-current]::after,.menu>li:has(.menu-parent[aria-expanded="true"])>.menu-parent::after{transform:scaleX(1)}
.menu-parent .ico{width:12px;height:12px;transform:rotate(90deg);transition:transform .25s var(--ease)}
.menu-parent[aria-expanded="true"] .ico{transform:rotate(-90deg)}
.submenu{position:absolute;top:100%;left:0;min-width:280px;background:#fff;box-shadow:var(--sh-card-h);border-top:3px solid var(--accent);padding:10px;display:none;z-index:5}
.submenu.open{display:block}
.submenu li{display:block;width:100%}
.submenu a{display:flex;align-items:center;gap:10px;padding:11px 12px;font-size:14px;font-weight:600;color:var(--head);text-transform:none;letter-spacing:0;min-height:44px}
.submenu a:hover{background:var(--tint);color:var(--brand)}
.submenu .submenu__all{border-bottom:1px solid var(--line);margin-bottom:6px;padding-bottom:12px;font-weight:800;color:var(--brand)}
.nav-call{margin-left:6px}

.nav-phone{display:flex;align-items:center;gap:12px}
.nav-phone .ic{display:grid;place-items:center;width:46px;height:46px;background:var(--tint);color:var(--brand);flex:none}
.nav-phone .ic .ico{width:20px;height:20px}
.nav-phone b{display:block;font-size:18px;color:var(--head);letter-spacing:-.01em;line-height:1.25}
.nav-phone span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.burger{display:none;place-items:center;width:46px;height:46px;background:var(--brand);border:0;cursor:pointer;flex:none;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--accent);transition:.3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==== 8. Breadcrumbs ==== */
.breadcrumbs{background:var(--tint);border-bottom:1px solid var(--line)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0;font-size:13.5px;color:var(--muted)}
.breadcrumbs li{display:flex;align-items:center;gap:8px}
.breadcrumbs li:not(:last-child)::after{content:"/";opacity:.5}
.breadcrumbs a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.breadcrumbs [aria-current]{color:var(--head);font-weight:700}

/* ==== 9. Hero (7 variants) ==== */
.hero{position:relative;background:var(--brand);color:#cfe0f2;overflow:hidden}
.hero::after{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border:60px solid rgba(255,255,255,.035);border-radius:50%;pointer-events:none}
.hero .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center;padding:clamp(52px,6.5vw,92px) 0 clamp(44px,5.5vw,76px)}
.hero .display{font-size:clamp(34px,6.6vw,96px);line-height:.94;font-weight:900;letter-spacing:-.025em;text-transform:uppercase;color:#fff;margin:6px 0 0}
.hero .display em{display:block;font-style:normal;color:var(--accent);overflow-wrap:break-word}
.hero .display--long{font-size:clamp(30px,4.9vw,68px)}
.hero p.lead{color:#bed3e9;font-size:17px;max-width:52ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;align-items:center}
.hero-note{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#a9c3dd;margin-top:20px}
.hero-note .ico{width:16px;height:16px;color:var(--accent)}

/* photo-backed hero (any variant except solid-panel, which stays deliberately photo-free) --
   an absolutely positioned <img class="hero-bg" alt=""> sits behind the content, a flat
   --dark-tinted scrim on top of it guarantees the same white/light text used on the dark
   variants stays readable (WCAG AA) regardless of the photo underneath. */
.hero--photo{color:#fff}
.hero--photo::after{display:none}
.hero--photo .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero--photo::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(11,18,32,.82)}
.hero--photo .wrap{position:relative;z-index:2}

/* split-phone / split-consultative (light tint, calm) */
.hero--split{background:var(--tint);color:var(--text);overflow:visible}
.hero--split::after{display:none}
/* .hero's overflow:hidden exists only to clip the decorative ::after circle. This variant
   carries no circle (above) but DOES carry .reveal descendants (.phonecard /
   .hero-consult-media) close to the section edge — overflow:visible removes any risk of
   their pre-animation translateY(28px) offset clipping against the section box. */
.hero--split h1{font-size:clamp(29px,4.3vw,52px);color:var(--head);font-weight:800;letter-spacing:-.01em;line-height:1.15;margin:6px 0 0}
.hero--split p.lead{color:var(--text)}
.hero--split .hero-note{color:var(--muted)}
.hero--split .hero-note .ico{color:var(--brand)}
/* split-phone can ALSO render onblack/photo (dark scrim) — the two rules above assume the
   light tint default and win by specificity over .hero--onblack's generic override, so they
   need their own higher-specificity dark-mode pair here, scoped to when both classes land on
   the same section. */
.hero--split.hero--onblack p.lead{color:var(--dark-muted)}
.hero--split.hero--onblack .hero-note{color:#a9c3dd}
.hero--split.hero--onblack .hero-note .ico{color:var(--accent)}
.phonecard{background:var(--brand);color:#cfe0f2;padding:32px;box-shadow:var(--sh-lift);text-align:center}
.phonecard>span{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.phonecard b{display:block;font-size:clamp(21px,2.5vw,29px);color:#fff;margin:10px 0 4px;letter-spacing:-.01em}
.phonecard small{display:block;font-size:13.5px;color:#a9c3dd;margin-bottom:18px}
.hero-consult-media{align-self:stretch}
.hero-consult-media .imgph{height:100%}

/* dark full-bleed / emergency (near-black, centred, maximum contrast) */
.hero--dark{background:var(--dark)}
.hero--dark::after{display:none}
.hero--dark .grid{grid-template-columns:1fr;text-align:center;padding:clamp(56px,7.5vw,104px) 0 clamp(48px,6vw,84px);justify-items:center}
.hero--dark .display{font-size:clamp(33px,5.4vw,72px);letter-spacing:-.02em}
.hero--dark .hero-cta{justify-content:center}
.hero--dark .lead{margin-inline:auto}
.hero--dark .hero-note{justify-content:center}
.hero--emergency .eyebrow--fill{margin-bottom:20px}
.hero-urgent{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:16px 22px;background:rgba(254,216,41,.1);border:2px solid var(--accent);max-width:64ch;text-align:left}
.hero-urgent .ico{width:26px;height:26px;color:var(--accent);flex:none}
.hero-urgent p{font-size:14.5px;line-height:1.6;color:#fff}

/* compact-cards (short navy hero + icon-card row) */
.hero--compact{padding-bottom:0}
.hero--compact .compact-top{padding:clamp(48px,6vw,80px) 0 clamp(38px,5vw,56px);max-width:70ch}
.hero--compact h1{font-size:clamp(27px,3.8vw,44px);color:#fff;font-weight:800;line-height:1.16;letter-spacing:-.01em;margin:6px 0 0}
.hero-cardrow{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dark-line)}
.hcard{background:var(--brand-700);padding:26px 22px;display:flex;gap:14px;align-items:center}
.hcard .ico{width:26px;height:26px;color:var(--accent);flex:none}
.hcard span{display:block;color:#fff;font-size:14.5px;font-weight:700;line-height:1.35}

/* solid-panel (full navy panel, sentence-case headline, no display treatment) */
.hero--panel .grid{grid-template-columns:1fr;padding:clamp(56px,7.5vw,96px) 0}
.hero--panel h1{color:#fff;font-size:clamp(27px,3.6vw,46px);line-height:1.2;font-weight:800;letter-spacing:-.01em;margin:6px 0 0;max-width:22ch}
.hero--panel .lead{max-width:60ch}

/* local-context (light, Stadtteil anchor line) */
.hero--local{background:var(--tint);color:var(--text);overflow:visible}
.hero--local::after{display:none}
.hero--local .grid{grid-template-columns:1fr;padding:clamp(44px,5.5vw,72px) 0}
.hero--local h1{font-size:clamp(27px,3.6vw,42px);color:var(--head);font-weight:800;letter-spacing:-.01em;line-height:1.18;margin:6px 0 0;max-width:22ch}
.local-anchor{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:9px 18px;background:#fff;border:1px solid var(--line2);font-size:14px;font-weight:700;color:var(--brand)}
.local-anchor .ico{width:17px;height:17px;color:var(--brand)}
.hero--local .hero-note{color:var(--muted)}
.hero--local .hero-note .ico{color:var(--brand)}
/* Stadtteil heroes can also carry a photo (hero--onblack/hero--photo) — same specificity gap
   as .hero--split above. */
.hero--local.hero--onblack .hero-note{color:#a9c3dd}
.hero--local.hero--onblack .hero-note .ico{color:var(--accent)}

/* the `dark` bool: push a normally-light variant to the darkest band */
.hero--onblack{background:var(--dark);color:var(--dark-muted)}
.hero--onblack::after{display:none}
.hero--onblack h1,.hero--onblack .stitle{color:#fff}
.hero--onblack .lead{color:var(--dark-muted)}
.hero--onblack .eyebrow{color:#fff;border-color:var(--dark-line);background:transparent}
.hero--onblack .eyebrow .bolt{background:transparent}
.hero--onblack .local-anchor{background:transparent;border-color:var(--dark-line);color:#fff}
.hero--onblack .local-anchor .ico{color:var(--accent)}
.hero--onblack.hero--compact .hcard{background:var(--dark2)}

/* ==== 10. Trust strip ==== */
.trust-strip{display:flex;flex-wrap:wrap;gap:14px}
.trust-strip__item{display:flex;align-items:center;gap:12px;padding:14px 20px;background:#fff;border:1px solid var(--line);flex:1 1 240px}
.trust-strip__item .ico{width:20px;height:20px;color:var(--brand);flex:none}
.trust-strip__item span{font-size:15px;font-weight:700;color:var(--head)}
.section--dark .trust-strip__item,.section--brand .trust-strip__item{background:rgba(255,255,255,.04);border-color:var(--dark-line)}
.section--dark .trust-strip__item span,.section--brand .trust-strip__item span{color:#fff}
.section--dark .trust-strip__item .ico,.section--brand .trust-strip__item .ico{color:var(--accent)}

/* ==== 11. Card grid ==== */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.icard{background:#fff;box-shadow:var(--sh-card);transition:box-shadow .4s var(--ease),transform .4s var(--ease);padding:30px 28px}
.icard:hover{box-shadow:var(--sh-card-h);transform:translateY(-6px)}
.icard h3{font-size:19px;margin:16px 0 9px}
.icard p{font-size:15.5px;line-height:1.75;color:var(--text)}
.icard .more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.icard .more .ico{width:14px;height:14px;transition:transform .3s var(--ease)}
.icard:hover .more .ico{transform:translateX(5px)}
.icard--media{padding:0;overflow:visible}
.icard--media .icard__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.icard--media .icard__media img{width:100%;height:100%;object-fit:cover;display:block}
.icard--media .icard__media .ibadge{position:absolute;left:24px;bottom:-25px;box-shadow:0 0 20px rgba(5,5,5,.15)}
.icard--media .icard__body{padding:44px 28px 30px}
.icard--media .icard__body h3{margin-top:0}

/* ==== 12. Icon badges ==== */
.ibadge{display:grid;place-items:center;width:75px;height:75px;flex:none;transition:.35s var(--ease);color:var(--brand)}
.ibadge .ico{width:34px;height:34px}
.ibadge--bordered{border:3px solid var(--line)}
.ibadge--round{border-radius:50%}
.ibadge--fill{background:var(--accent);color:var(--on-accent)}
.ibadge--navy{background:var(--brand);color:var(--accent)}
.ibadge--sm{width:50px;height:50px}.ibadge--sm .ico{width:22px;height:22px}
.ibadge--lg{width:90px;height:90px}.ibadge--lg .ico{width:44px;height:44px}

/* ==== 13. Process steps (horizontal + vertical) ==== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative}
.steps::before{content:"";position:absolute;top:37px;left:11%;right:11%;height:3px;background:repeating-linear-gradient(90deg,var(--line2) 0 14px,transparent 14px 26px)}
.step{position:relative;text-align:center}
.step .no{position:relative;display:grid;place-items:center;width:74px;height:74px;margin:0 auto 20px;background:var(--accent);color:var(--on-accent);font-size:25px;font-weight:900;box-shadow:0 0 0 10px var(--bg);transition:.35s var(--ease)}
.section--tint .step .no,.section--tint2 .step .no{box-shadow:0 0 0 10px var(--tint)}
.section--dark .step .no{box-shadow:0 0 0 10px var(--dark)}
.step:hover .no{background:var(--brand);color:var(--accent)}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:15.5px;line-height:1.72}

.steps--vertical{display:grid;gap:0;grid-template-columns:1fr;position:relative;max-width:70ch}
.steps--vertical::before{content:"";position:absolute;top:8px;bottom:8px;left:36px;width:3px;background:repeating-linear-gradient(180deg,var(--line2) 0 12px,transparent 12px 22px)}
.stepv{position:relative;display:flex;gap:22px;padding:0 0 34px}
.stepv:last-child{padding-bottom:0}
.stepv .no{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:74px;height:74px;background:var(--accent);color:var(--on-accent);font-size:23px;font-weight:900;box-shadow:0 0 0 8px var(--bg)}
.section--tint .stepv .no,.section--tint2 .stepv .no{box-shadow:0 0 0 8px var(--tint)}
.section--dark .stepv .no{box-shadow:0 0 0 8px var(--dark)}
.stepv h3{font-size:18px;margin-bottom:6px;padding-top:14px}
.stepv p{font-size:15.5px;line-height:1.72}

/* ==== 14. Checklist / icon list ==== */
.checks{display:grid;gap:14px}
.checks li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--text)}
.checks .ico{width:22px;height:22px;color:var(--brand);margin-top:3px}
.checks b{color:var(--head)}

.iconlist{display:grid;gap:20px}
.iconlist__item{display:flex;gap:16px;align-items:flex-start}
.iconlist__item .ibadge{flex:none}
.iconlist__item p{font-size:16px;line-height:1.75;color:var(--text);padding-top:12px}
.section--dark .iconlist__item p,.section--brand .iconlist__item p{color:var(--dark-muted)}

/* ==== 15. Chip cluster ==== */
.chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;background:#fff;border:1px solid var(--line);font-size:14px;color:var(--head);transition:.3s var(--ease);min-height:44px}
.chip::before{content:"";width:7px;height:7px;background:var(--accent);flex:none}
a.chip:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ==== 16. Notice band (danger / info) ==== */
.notice{border:3px solid transparent}
.notice .wrap{display:flex;gap:30px;align-items:center;justify-content:space-between;padding:34px 0;flex-wrap:wrap}
.notice .tx{display:flex;gap:20px;align-items:center;max-width:70ch}
.notice .ico.lg{width:44px;height:44px;flex:none}
.notice h2,.notice h3{font-size:clamp(20px,2.4vw,27px);line-height:1.28}
.notice p{font-size:15px;margin-top:5px}
.notice--danger{background:var(--accent);color:var(--on-accent)}
.notice--danger h2,.notice--danger h3{color:var(--on-accent)}
.notice--danger p{color:#2a2409}
.notice--danger .ico.lg{color:var(--on-accent)}
.notice--danger .btn--brand::before{background:#fff}
.notice--danger .btn--brand:hover{color:var(--brand)}
.notice--info{background:var(--tint);border-color:var(--line2)}
.notice--info h2,.notice--info h3{color:var(--head)}
.notice--info p{color:var(--text)}
.notice--info .ico.lg{color:var(--brand)}

/* ==== 17. FAQ accordion ==== */
.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.faqlist{display:grid}
.faq{background:#fff;border:1px solid var(--line);margin-bottom:14px;transition:.3s var(--ease)}
.faq[open]{box-shadow:var(--sh-card);border-color:transparent}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:center;padding:20px 22px;font-weight:700;font-size:16.5px;color:var(--head);line-height:1.45;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;margin-left:auto;width:26px;height:26px;background:var(--brand);clip-path:polygon(43% 0,57% 0,57% 43%,100% 43%,100% 57%,57% 57%,57% 100%,43% 100%,43% 57%,0 57%,0 43%,43% 43%);transition:transform .3s var(--ease),background .3s}
.faq[open] summary::after{transform:rotate(135deg);background:var(--accent)}
.faq .ans{padding:0 22px 22px;font-size:16px;line-height:1.8;color:var(--text)}
.faq .qn{display:grid;place-items:center;width:34px;height:34px;flex:none;background:var(--tint);color:var(--brand);font-size:13px;font-weight:900}
.faq[open] .qn{background:var(--accent);color:var(--on-accent)}

/* ==== 18. CTA band ==== */
.ctaband{position:relative;background:var(--brand);overflow:hidden}
.ctaband::before{content:"";position:absolute;left:-90px;bottom:-160px;width:420px;height:420px;border:56px solid rgba(255,255,255,.04);border-radius:50%}
.ctaband .wrap{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding:clamp(52px,6vw,86px) 0}
.ctaband h2{font-size:clamp(27px,3.6vw,44px);color:#fff;line-height:1.2}
.ctaband p{color:#bed3e9;margin-top:14px;max-width:56ch}
.ctaband .box{background:var(--brand-700);padding:34px;text-align:center;box-shadow:var(--sh-lift)}
.ctaband .box>span{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ctaband .box b{display:block;font-size:clamp(25px,3vw,34px);color:#fff;margin:10px 0 4px;letter-spacing:-.01em}
.ctaband .box small{display:block;font-size:13.5px;color:#a9c3dd;margin-bottom:20px}

/* ==== 19. Phone block ==== */
.phoneblock{display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:space-between;background:var(--brand);color:#cfe0f2;padding:clamp(30px,4vw,48px)}
.phoneblock__text h2,.phoneblock__text h3{color:#fff;font-size:clamp(22px,2.8vw,32px);max-width:26ch}
.phoneblock__text p{margin-top:10px;color:var(--dark-muted);max-width:52ch}
.callrow{display:flex;align-items:center;gap:18px;flex:none}
.callrow .ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--on-accent);flex:none;transition:.35s var(--ease)}
.callrow:hover .ic{background:#fff;color:var(--brand)}
.callrow .ic .ico{width:26px;height:26px}
.callrow span{display:block;font-size:14.5px;color:var(--dark-muted)}
.callrow b{display:block;font-size:clamp(20px,2.3vw,28px);color:#fff;letter-spacing:-.01em;line-height:1.25}

/* ==== 20. Feature split / contrast pair / prose lead ==== */
.fsplit__text{max-width:56ch}
.fsplit__text h2,.fsplit__text h3{font-size:clamp(25px,3.2vw,36px)}
.fsplit__text p{margin-top:14px;color:var(--text);font-size:16.5px;line-height:1.8}
/* sb_feature_split()'s markup order is always text-then-media; which SIDE the media
   lands on is a pure CSS `order` swap, not a DOM change — .split (default, $reverse=false)
   pulls the media visually left, .split.rev leaves it on the natural (right) side. */
.split .fsplit__media{order:-1}
.split.rev .fsplit__media{order:0}

.contrastpair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.contrastpair__side{background:var(--tint);padding:clamp(30px,4vw,44px)}
.contrastpair__side--dark{background:var(--brand);color:#cfe0f2}
.contrastpair__side h3{font-size:20px;margin-bottom:10px}
.contrastpair__side--dark h3{color:#fff}
.contrastpair__side p{font-size:15.5px;line-height:1.75;color:var(--text)}
.contrastpair__side--dark p{color:var(--dark-muted)}

.prose{max-width:var(--c-narrow)}
.prose h2{font-size:clamp(27px,3.6vw,40px);margin-bottom:22px}
.prose p{font-size:17px;line-height:1.85;color:var(--text);margin-bottom:20px}
.prose p:last-child{margin-bottom:0}

/* ==== 21. USP panel ==== */
/* sb_usp_panel() puts these classes on the <section> itself (alongside .section, which
   already supplies the vertical rhythm) — no extra padding needed here. */
.usp-panel{text-align:center}
.usp-panel h2,.usp-panel h3{font-size:clamp(24px,3vw,34px);max-width:34ch;margin-inline:auto}
.usp-panel p{margin-top:16px;max-width:64ch;margin-inline:auto;font-size:16.5px;line-height:1.8}
.usp-panel--dark{background:var(--dark);color:var(--dark-muted)}
.usp-panel--dark h2,.usp-panel--dark h3{color:#fff}
.usp-panel--brand{background:var(--brand);color:#cfe0f2}
.usp-panel--brand h2,.usp-panel--brand h3{color:#fff}
.usp-panel--tint{background:var(--tint);color:var(--text)}
.usp-panel--tint h2,.usp-panel--tint h3{color:var(--head)}
.usp-panel .hero-cta{justify-content:center}
.usp-panel{position:relative}
.usp-panel .panel-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.usp-panel--photo::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(11,18,32,.82)}
.usp-panel--photo .wrap{position:relative;z-index:2}
.usp-panel--photo h2,.usp-panel--photo h3{color:#fff}
.usp-panel--photo p{color:var(--dark-muted)}

/* ==== 22. Image placeholder (imgph) ==== */
.imgph{position:relative;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;
  border:2px dashed var(--line2);padding:24px;color:var(--muted);width:100%;
  background:repeating-linear-gradient(-45deg,#fff 0 11px,var(--tint) 11px 22px)}
.imgph .ico{width:40px;height:40px;color:var(--line2)}
.imgph b{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.imgph span{font-size:13px;line-height:1.55;max-width:30ch}
.imgph[data-ratio="4:3"]{aspect-ratio:4/3}
.imgph[data-ratio="3:4"]{aspect-ratio:3/4}
.imgph[data-ratio="16:9"]{aspect-ratio:16/9}
.imgph[data-ratio="9:10"]{aspect-ratio:9/10}
.imgph[data-ratio="1:1"]{aspect-ratio:1/1}
.imgph--photo{display:block;border:0;padding:0;background:none}
.imgph--photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ==== 23. Sticky call bar ==== */
/* `.callbar` + position:fixed is the canonical hook the validator looks for — do not rename. */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:150;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(5,5,5,.13);padding:10px 14px;display:none}

/* ==== 24. Scroll-to-top ==== */
.toTop{position:fixed;right:20px;bottom:22px;z-index:120;width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;background:var(--brand);color:var(--accent);display:grid;place-items:center;
  box-shadow:0 7px 30px rgba(0,0,0,.3);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),background .3s}
.toTop.show{opacity:1;transform:none;pointer-events:auto}
.toTop:hover{background:var(--accent);color:var(--on-accent)}
.toTop .ico{width:22px;height:22px}

/* ==== 25. Footer ==== */
footer{background:var(--dark);color:var(--dark-muted);font-size:16px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding:clamp(52px,6vw,84px) 0 40px}
footer h2{font-size:16px;color:#fff;margin-bottom:20px;position:relative;padding-bottom:14px}
footer h2::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;background:var(--accent)}
footer ul{display:grid;gap:11px}
footer a{color:var(--dark-muted)}
footer a:hover{color:var(--accent)}
.fbrand{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:#fff;font-weight:800;font-size:19px}
.fbrand .mk{display:grid;place-items:center;width:44px;height:44px;background:var(--brand);color:var(--accent);flex:none}
.fbrand .mk .ico{width:24px;height:24px}
.fcontact li{display:flex;gap:12px;align-items:flex-start}
.fcontact .ico{width:17px;height:17px;color:var(--accent);flex:none;margin-top:5px}
.fcontact b{display:block;color:#fff;font-size:17px}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchips a{display:inline-flex;padding:7px 13px;border:1px solid var(--dark-line);font-size:13px;min-height:36px;align-items:center}
.fchips a:hover{background:var(--dark-line);color:#fff}
.fbar{border-top:1px solid var(--dark-line);padding:22px 0;display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;font-size:13.5px}
.fbar ul{display:flex;gap:20px}

/* ==== 26. Focus-visible & accessibility helpers ==== */
:focus-visible{outline:3px solid var(--accent-600);outline-offset:2px}
.section--dark :focus-visible,.section--brand :focus-visible,.hero--dark :focus-visible,.hero:not(.hero--split):not(.hero--local) :focus-visible{outline-color:#fff}

/* ==== 27. Reveal animation + reduced motion ==== */
/* Transform-only on purpose: opacity would let a headless contrast-checker read
   below-the-fold content as "invisible"/low-contrast before it has scrolled into view. */
.reveal{transform:translateY(28px);transition:transform .7s var(--ease)}
.reveal.in{transform:none}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{transform:none}
}

/* ==== 28. Responsive ==== */
@media (max-width:1080px){
  .hero .grid{grid-template-columns:1fr;gap:38px}
  .g4,.hero-cardrow,.trust-strip{grid-template-columns:1fr 1fr}
  .hero-cardrow{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr 1fr}
  .split,.faqgrid,.contrastpair{grid-template-columns:1fr;gap:40px}
  .ctaband .wrap{grid-template-columns:1fr}
  .phoneblock{justify-content:flex-start}
  .fgrid{grid-template-columns:1fr 1fr}
  .shead.split{grid-template-columns:1fr;align-items:start}
  .steps{grid-template-columns:1fr 1fr}.steps::before{display:none}
}
/* The header (logo + 7 nav items + submenu arrow + CTA button + phone-info block) stops
   fitting well before the 760px content breakpoint — between roughly 760-1300px it was running
   full desktop layout with nothing to shrink, clipping/hiding the phone-info text. Switch to
   the same hamburger panel used below 760px already at the 1080px content breakpoint instead
   (reusing that threshold rather than inventing a new one) — kept as its own block so the
   760px block's content-grid rules (g2/g3/g4 etc.) are untouched. */
@media (max-width:1080px){
  .nav-phone,.topbar ul.sec{display:none}
  .burger{display:grid;margin-left:auto}
  .menu-nav{margin-left:0}
  .menu-nav:not(.open){display:none}
  .menu-nav.open{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:var(--sh-card-h);max-height:calc(100vh - 82px);overflow-y:auto;z-index:110}
  .menu-nav.open .wrap{width:100%;margin:0;padding-inline:18px}
  .menu{flex-direction:column;align-items:stretch;gap:0;padding-block:6px}
  .menu>li{flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}
  .menu>li>a,.menu>li>.menu-parent{width:100%;justify-content:space-between;padding:14px 4px}
  .menu>li>a::after,.menu>li>.menu-parent::after{display:none}
  .menu-item.has-submenu{flex-direction:row;flex-wrap:wrap}
  .menu-item.has-submenu>a{flex:1 1 auto;width:auto}
  .menu-item.has-submenu>.menu-parent{width:44px;flex:none;justify-content:center;padding:14px 0}
  .submenu{position:static;box-shadow:none;border-top:1px solid var(--line);padding:0 0 8px 14px;width:100%}
  .submenu li{width:auto}
  .nav-call{margin:10px 0 14px;width:100%}
  .nav-call .btn{width:100%;justify-content:center}
}
@media (max-width:760px){
  .nav-phone,.topbar ul.sec{display:none}
  .burger{display:grid;margin-left:auto}
  .menu-nav{margin-left:0}
  .menu-nav:not(.open){display:none}
  .menu-nav.open{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:var(--sh-card-h);max-height:calc(100vh - 82px);overflow-y:auto;z-index:110}
  .menu-nav.open .wrap{width:100%;margin:0;padding-inline:18px}
  .menu{flex-direction:column;align-items:stretch;gap:0;padding-block:6px}
  .menu>li{flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}
  .menu>li>a,.menu>li>.menu-parent{width:100%;justify-content:space-between;padding:14px 4px}
  .menu>li>a::after,.menu>li>.menu-parent::after{display:none}
  .menu-item.has-submenu{flex-direction:row;flex-wrap:wrap}
  .menu-item.has-submenu>a{flex:1 1 auto;width:auto}
  .menu-item.has-submenu>.menu-parent{width:44px;flex:none;justify-content:center;padding:14px 0}
  .submenu{position:static;box-shadow:none;border-top:1px solid var(--line);padding:0 0 8px 14px;width:100%}
  .submenu li{width:auto}
  .nav-call{margin:10px 0 14px;width:100%}
  .nav-call .btn{width:100%;justify-content:center}
  .callbar{display:block}
  .toTop{bottom:88px;right:14px}
  .g2,.g3,.g4,.hero-cardrow,.trust-strip,.steps,.fgrid{grid-template-columns:1fr}
  .hero .display{letter-spacing:-.015em}
  .btn{width:100%;justify-content:center;padding:17px 26px}
  .hero-cta{gap:11px}
  .notice .wrap{flex-direction:column;align-items:flex-start}
  .phoneblock{flex-direction:column;align-items:stretch;text-align:center}
  .callrow{justify-content:center}
}