/* generated by build.py from site.config.json — edit the config, not this block */
:root{
  --paper: #F6F4EE;
  --surface: #ffffff;
  --ink: #1B2129;
  --muted: #5A6470;
  --rule: #D8D2C4;
  --tint: #FFF0D9;
  --accent: #C2410C;
  --accent-ink: #ffffff;
  --dark: #14263A;
  --dark-ink: #F2EDE2;
  --dark-2: #0E1C2B;
  --copper: #B87333;
  --copper-light: #E9C39A;
  --accent-hot: #E2571F;
  --font-display: 'Barlow Condensed', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --display-weight: 700;
  --radius: 6px;
}

/* ── Mapas do Eletricista · sales-page styles ─────────────────────────────
   build.py puts a :root { … } block (brand colours + fonts from site.config.json) ABOVE this file.
   Never write a hex colour here: use the variables. Extra brand variables used below (set in the config):
   --dark-2 (deeper navy), --copper, --copper-light, --accent-hot (lighter orange for gradients).

   Design idea: an equipment spec sheet. Dark blueprint-grid hero, copper hairlines, numbered sections,
   spec-sheet rows for the pains, price cards as engraved nameplates (double copper border + rivets).
   Mobile first (390 px). Class names are the template's (check.py / tracking depend on data-sec + .cta).     */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
     font-size:17.5px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--copper);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--font-display);font-weight:var(--display-weight);line-height:1.08;
         letter-spacing:-.003em;text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(37px,9vw,70px);line-height:1}
@media (min-width:900px){ .hero h1{font-size:clamp(46px,4.6vw,60px)} }
h2{font-size:clamp(28px,6vw,46px);text-transform:uppercase;letter-spacing:.012em;line-height:1.04}
h3{font-size:22px;line-height:1.15}
p{margin:0 0 1em;max-width:62ch}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.eng{max-width:1120px;margin:0 auto;padding:0 22px}
.eng > *{max-width:760px}
.eng > h2{max-width:900px}
section.dunkel .eng > *{margin-left:auto;margin-right:auto}

/* short copper+orange rule under every section heading */
section h2::after{content:"";display:block;width:64px;height:4px;margin-top:16px;
  background:linear-gradient(90deg,var(--copper) 0 68%,var(--accent) 68%)}

/* ── Section rhythm: paper / white / tint, with dark blueprint sections as punctuation ─────────── */
section{padding:72px 0;position:relative}
section.flaeche{background:var(--surface)}
section.getoent{background:var(--tint)}
section.dunkel,[data-sec="einblick"],.hero{
  background:
    radial-gradient(760px 420px at 85% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%),
    linear-gradient(color-mix(in srgb,var(--dark-ink) 4%,transparent) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,color-mix(in srgb,var(--dark-ink) 4%,transparent) 1px,transparent 1px) 0 0/44px 44px,
    var(--dark-2);
  color:var(--dark-ink)}
section.dunkel h2,[data-sec="einblick"] h2,.hero h1{color:#fff}
section.dunkel a:not(.cta){color:var(--dark-ink)}
@media (min-width:900px){ section{padding:108px 0} }

/* numbered section labels: 01 / 02 … drawn by CSS counters */
main{counter-reset:sec}
.label{counter-increment:sec;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;
       letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin-bottom:18px}
.label::before{content:counter(sec,decimal-leading-zero);font-family:var(--font-display);font-size:17px;
       letter-spacing:.06em;color:var(--accent)}
.label::after{content:"";height:1px;width:56px;background:currentColor;opacity:.45}
section.dunkel .label,[data-sec="einblick"] .label,.hero .label{color:var(--copper-light)}
section.dunkel .label::before,[data-sec="einblick"] .label::before,.hero .label::before{color:var(--accent-hot)}

/* ── Header (dark, sits seamlessly on the hero) ───────────────────────────────────────────────── */
.kopf{padding:16px 0;background:var(--dark-2);border-bottom:1px solid color-mix(in srgb,var(--dark-ink) 12%,transparent)}
.kopf .logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--dark-ink)}
.kopf .logo svg,.kopf .logo img{height:34px;width:auto}
.logo-nome{font-family:var(--font-display);font-weight:700;font-size:23px;line-height:1;letter-spacing:.015em;text-transform:uppercase}

/* ── Buttons (class MUST contain "cta": the brand reader and check.py rely on it) ─────────────── */
.cta{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(180deg,var(--accent-hot),var(--accent));
     color:var(--accent-ink);text-decoration:none;font-weight:700;font-size:17px;line-height:1.25;letter-spacing:.01em;
     padding:17px 26px;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--accent) 70%,#000);
     box-shadow:0 1px 0 color-mix(in srgb,#fff 35%,transparent) inset,0 12px 26px color-mix(in srgb,var(--accent) 38%,transparent);
     transition:transform .15s,box-shadow .15s}
.cta::after{content:"→";font-size:19px;transition:transform .15s}
.cta:hover{transform:translateY(-1px)}
.cta:hover::after{transform:translateX(3px)}
.cta.breit{display:flex;justify-content:center;text-align:center}
.cta-unter{font-size:13.5px;color:var(--muted);margin-top:12px}
section.dunkel .cta-unter{color:color-mix(in srgb,var(--dark-ink) 72%,transparent)}

/* ── Hero ─────────────────────────────────────────────────────────────────────────────────────── */
.hero{padding:44px 0 64px;border-bottom:4px solid var(--copper)}
.hero-grid{display:grid;grid-template-areas:"kopf" "bild" "rest";gap:26px;align-items:center}
.hero-kopf{grid-area:kopf}.hero-bild{grid-area:bild;margin:0}.hero-rest{grid-area:rest}
.hero-kopf h1{margin-bottom:0}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.12fr .88fr;grid-template-areas:"kopf bild" "rest bild";column-gap:64px;row-gap:16px;align-items:end}
  .hero-rest{align-self:start}
  .hero{padding:34px 0 88px}
}
.hero .sub{font-size:19px;color:color-mix(in srgb,var(--dark-ink) 80%,transparent)}
/* the product photo, framed by copper corner brackets */
.hero-bild{position:relative}
.hero-bild::before,.hero-bild::after{content:"";position:absolute;width:34px;height:34px;border:2px solid var(--copper);pointer-events:none;z-index:2}
.hero-bild::before{top:-11px;left:-11px;border-right:0;border-bottom:0}
.hero-bild::after{bottom:-11px;right:-11px;border-left:0;border-top:0}
.hero-bild img{border-radius:3px;box-shadow:0 34px 64px rgb(0 0 0 / .5),0 0 0 1px color-mix(in srgb,var(--dark-ink) 14%,transparent)}
.bild-breit{margin:10px 0 36px}
.bild-breit img{border-radius:6px;box-shadow:0 20px 44px color-mix(in srgb,var(--ink) 20%,transparent),0 0 0 1px var(--rule)}
.preis-bild img{border-radius:var(--radius);box-shadow:0 18px 40px rgb(0 0 0 / .12)}
figure .illu{font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center}
/* the worked example under the headline = a spec-sheet strip */
.beispiel{background:color-mix(in srgb,var(--dark-ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--copper) 60%,transparent);
          border-left:4px solid var(--copper);border-radius:4px;padding:12px 16px;font-size:15.5px;margin:18px 0;color:var(--dark-ink)}
.beispiel strong{display:block;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-light);margin-bottom:3px}
.vertrauen{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14.5px;
           color:color-mix(in srgb,var(--dark-ink) 72%,transparent)}
.vertrauen li::before{content:"✓ ";color:var(--copper-light);font-weight:700}

/* ── 02 the pains: spec-sheet rows, big copper numerals, hairline between ────────────────────── */
.punkte{list-style:none;padding:0;margin:8px 0 0;display:block;counter-reset:p}
.punkte li{counter-increment:p;display:grid;grid-template-columns:62px 1fr;column-gap:16px;row-gap:2px;
           padding:26px 0;background:none;border:0;border-top:1px solid var(--rule);border-radius:0}
.punkte li:last-child{border-bottom:1px solid var(--rule)}
.punkte li::before{content:counter(p,decimal-leading-zero);grid-row:span 2;font-family:var(--font-display);
           font-size:46px;line-height:.95;color:var(--copper)}
.punkte li strong{font-family:var(--font-display);font-size:25px;line-height:1.1;display:block;margin-bottom:4px}

/* the "why" section: first paragraph reads as a pull-quote */
.warum-box p:first-of-type{font-size:22px;line-height:1.5;font-family:var(--font-display);letter-spacing:.005em;
           border-left:4px solid var(--copper);padding-left:20px}

/* ── Cards: method steps, modules, bonuses ───────────────────────────────────────────────────── */
.karten{display:grid;gap:18px}
@media (min-width:720px){ .karten{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .karten.drei{grid-template-columns:repeat(3,1fr)} [data-sec="methode"] .karten{grid-template-columns:repeat(4,1fr)} }
.karte{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:26px 24px;position:relative;
       box-shadow:0 10px 28px color-mix(in srgb,var(--ink) 7%,transparent)}
.karte h3{margin-bottom:8px}
.karte p:last-child{margin-bottom:0}
.karte p{color:var(--muted);font-size:16.5px}
.karten.drei .karte{border-top:4px solid var(--copper)}
.karte .nr{width:48px;height:48px;border-radius:50%;background:var(--dark-2);color:var(--copper-light);border:2px solid var(--copper);
           display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:26px;line-height:1;margin-bottom:18px}

/* ── Gallery of REAL pages (dark section: the pages glow) ────────────────────────────────────── */
.galerie{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 22px 18px;margin:8px -22px 0}
.galerie button{flex:0 0 72%;scroll-snap-align:center;border:0;padding:0;background:none;cursor:zoom-in;color:inherit;text-align:left}
.galerie img{border-radius:4px;box-shadow:0 18px 40px rgb(0 0 0 / .5),0 0 0 1px color-mix(in srgb,var(--dark-ink) 16%,transparent);transition:transform .2s}
.galerie button:hover img{transform:translateY(-4px)}
.galerie figcaption{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:12px;
           color:color-mix(in srgb,var(--dark-ink) 75%,transparent)}
@media (min-width:900px){ .galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;overflow:visible;margin:12px 0 0;padding:0}
                          .galerie button{flex:none} }
@media (min-width:1100px){ .galerie{grid-template-columns:repeat(6,1fr);gap:18px} }
.galerie .platzhalter{flex:0 0 72%;scroll-snap-align:center;aspect-ratio:800/1131;margin:0;border:2px dashed var(--rule);
  border-radius:6px;padding:20px 18px;display:flex;flex-direction:column;justify-content:space-between;background:var(--surface)}
.galerie .platzhalter strong{font-family:var(--font-display);font-size:19px;line-height:1.2;color:var(--ink)}
.galerie .platzhalter .etikett{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:4px 10px;background:var(--paper)}
@media (min-width:900px){ .galerie .platzhalter{flex:none} }
.cta-unter a{color:inherit}
#lupe{position:fixed;inset:0;z-index:90;background:rgb(0 0 0 / .88);display:none;flex-direction:column;
      align-items:center;justify-content:center;gap:10px;padding:20px;cursor:zoom-out}
#lupe img{max-height:84vh;width:auto;border-radius:4px}
#lupe p{color:#eee;font-size:13px;margin:0}
[data-sec="einblick"] .eng p,[data-sec="einblick"] .wrap > p{color:color-mix(in srgb,var(--dark-ink) 78%,transparent)}

/* ── Fit / not fit ───────────────────────────────────────────────────────────────────────────── */
.passt{display:grid;gap:18px}
@media (min-width:800px){ .passt{grid-template-columns:1fr 1fr} }
.passt .karte{padding:28px 26px}
.passt .karte.ja{border-top:4px solid var(--accent)}
.passt .karte.nein{border-top:4px solid var(--muted)}
.passt ul{padding-left:0;list-style:none;margin:0}
.passt li{padding:9px 0 9px 32px;position:relative;border-bottom:1px solid var(--rule)}
.passt li:last-child{border-bottom:0}
.passt .ja li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700;font-size:19px}
.passt .nein li::before{content:"✕";position:absolute;left:0;color:var(--muted);font-weight:700;font-size:17px}

/* ── Price cards = engraved equipment nameplates ─────────────────────────────────────────────── */
.plano-resumo{margin:0 0 8px;color:var(--muted);max-width:68ch}
.preis-grid{display:grid;gap:28px;align-items:center}
@media (min-width:900px){ .preis-grid{grid-template-columns:.9fr 1.1fr} }
.stufen{display:grid;gap:34px;align-items:stretch;margin-top:40px}
@media (min-width:820px){ .stufen{grid-template-columns:1fr 1fr;gap:30px} }
@media (max-width:819px){ .stufen .preiskarte:not(.hell){order:-1} }
.preiskarte{position:relative;background:var(--dark-2);color:var(--dark-ink);border-radius:12px;padding:38px 32px 32px;
            box-shadow:0 30px 60px color-mix(in srgb,var(--dark) 38%,transparent)}
/* inner copper border + four rivets */
.preiskarte::before{content:"";position:absolute;inset:9px;border:1.5px solid var(--copper);border-radius:7px;pointer-events:none;
  background:
    radial-gradient(circle at 17px 17px,var(--copper) 0 3px,transparent 3.6px),
    radial-gradient(circle at calc(100% - 17px) 17px,var(--copper) 0 3px,transparent 3.6px),
    radial-gradient(circle at 17px calc(100% - 17px),var(--copper) 0 3px,transparent 3.6px),
    radial-gradient(circle at calc(100% - 17px) calc(100% - 17px),var(--copper) 0 3px,transparent 3.6px)}
.preiskarte > *{position:relative}
.preiskarte h3{font-size:30px;text-transform:uppercase;letter-spacing:.06em;color:var(--copper-light);margin-bottom:14px}
.preiskarte ul{list-style:none;padding:0;margin:0 0 24px}
.preiskarte li{padding:9px 0 9px 30px;position:relative;border-bottom:1px solid color-mix(in srgb,var(--dark-ink) 14%,transparent);font-size:16.5px}
.preiskarte li::before{content:"✓";position:absolute;left:0;font-weight:700;color:var(--copper-light)}
.preis{font-family:var(--font-display);font-weight:var(--display-weight);font-size:68px;line-height:1;margin:8px 0 4px;color:#fff;letter-spacing:.005em}
.preis-alt{text-decoration:line-through;opacity:.6;font-size:22px;margin-right:10px}
.preiskarte .preis + p{color:color-mix(in srgb,var(--dark-ink) 70%,transparent);font-size:15px}
.preiskarte.hell{background:var(--surface);color:var(--ink);box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 10%,transparent);border:1px solid var(--rule)}
.preiskarte.hell::before{border-color:var(--copper);background:
    radial-gradient(circle at 17px 17px,var(--rule) 0 3px,transparent 3.6px),
    radial-gradient(circle at calc(100% - 17px) 17px,var(--rule) 0 3px,transparent 3.6px),
    radial-gradient(circle at 17px calc(100% - 17px),var(--rule) 0 3px,transparent 3.6px),
    radial-gradient(circle at calc(100% - 17px) calc(100% - 17px),var(--rule) 0 3px,transparent 3.6px)}
.preiskarte.hell h3{color:var(--accent)}
.preiskarte.hell li{border-bottom-color:var(--rule)}
.preiskarte.hell li::before{color:var(--accent)}
.preiskarte.hell .preis{color:var(--ink)}
.preiskarte.hell .preis + p{color:var(--muted)}
.empfohlen{position:absolute;top:-14px;right:30px;z-index:3;background:var(--copper);color:var(--dark-2);
           font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:3px;
           box-shadow:0 6px 14px rgb(0 0 0 / .25)}
.stufen-bild{width:100%;max-width:none;margin:0 0 20px;border-radius:5px;box-shadow:0 0 0 1px color-mix(in srgb,var(--copper) 50%,transparent)}
.rechtlich{font-size:13px;opacity:.75;margin-top:14px}
.garantie{display:grid;grid-template-columns:38px 1fr;gap:4px 16px;align-items:start;border:1px solid var(--rule);
          border-left:4px solid var(--copper);border-radius:var(--radius);padding:20px 22px;background:var(--surface);margin-top:28px}
.garantie svg{grid-row:span 2;width:36px;height:36px;color:var(--accent)}
.garantie strong{display:block;margin-bottom:4px;font-family:var(--font-display);font-size:22px;text-transform:uppercase;letter-spacing:.03em}
.aviso-preco{margin-top:16px;font-size:14px;color:var(--muted);text-align:center;max-width:none}

/* ── FAQ ─────────────────────────────────────────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--rule);padding:4px 0;transition:background .2s}
.faq details[open]{border-left:4px solid var(--copper);padding-left:18px;background:linear-gradient(90deg,var(--tint),transparent 70%)}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:18px;padding:18px 36px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-family:var(--font-display);font-size:30px;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted)}

/* ── Final call + thank-you page ─────────────────────────────────────────────────────────────── */
section.dunkel{text-align:center}
section.dunkel h2::after{margin-left:auto;margin-right:auto}
section.dunkel p{margin-left:auto;margin-right:auto;color:color-mix(in srgb,var(--dark-ink) 80%,transparent)}
section.dunkel{border-top:4px solid var(--copper)}

/* ── Sticky buy bar ──────────────────────────────────────────────────────────────────────────── */
#kaufleiste{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--dark-2);color:var(--dark-ink);border-top:2px solid var(--copper);
            padding:10px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 -10px 34px rgb(0 0 0 / .32);
            transform:translateY(110%);transition:transform .25s}
#kaufleiste.sichtbar{transform:none}
#kaufleiste .was{flex:1;min-width:0;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#kaufleiste strong{white-space:nowrap;font-size:15px}
#kaufleiste .was small{display:block;opacity:.75;font-size:13px}
#kaufleiste .cta{padding:11px 18px;font-size:15px;white-space:nowrap;box-shadow:none}
#kaufleiste .cta::after{display:none}
@media (max-width:480px){
  #kaufleiste .was{display:none}
  #kaufleiste{justify-content:space-between}
}

/* ── Footer ──────────────────────────────────────────────────────────────────────────────────── */
.fuss{padding:44px 0 104px;background:var(--dark-2);border-top:4px solid var(--copper);font-size:14px;
      color:color-mix(in srgb,var(--dark-ink) 68%,transparent)}
.fuss a{color:color-mix(in srgb,var(--dark-ink) 82%,transparent)}
.fuss-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0}
.fuss-klein{font-size:13px}
.hinweis{font-size:13px;background:var(--tint);border-radius:var(--radius);padding:12px 14px}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important} }

/* fixes after the first visual check */
.preiskarte .label{counter-increment:none;margin-bottom:14px;color:var(--copper-light);font-size:13px}
.preiskarte .label::before{content:none}
.preiskarte .label::after{width:40px}
.preiskarte.hell .label{color:var(--accent)}
.fuss .hinweis{background:color-mix(in srgb,var(--dark-ink) 9%,transparent);color:color-mix(in srgb,var(--dark-ink) 88%,transparent);
               border:1px solid color-mix(in srgb,var(--dark-ink) 16%,transparent);border-left:4px solid var(--copper)}

/* worked case: numbered steps with a mini quote */
.passos{list-style:none;padding:0;margin:26px 0 0;counter-reset:ps;display:grid;gap:0}
.passos > li{counter-increment:ps;display:grid;grid-template-columns:44px 1fr;column-gap:16px;row-gap:6px;padding:20px 0;border-top:1px solid var(--rule)}
.passos > li:last-child{border-bottom:1px solid var(--rule)}
.passos > li::before{content:counter(ps);grid-row:span 4;width:36px;height:36px;border-radius:50%;background:var(--dark-2);color:var(--copper-light);
  border:2px solid var(--copper);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:20px}
.passos > li > strong{font-family:var(--font-display);font-size:23px;line-height:1.1;grid-column:2}
.passos > li > span,.passos > li > ul,.passos > li > table{grid-column:2}
.opcoes{list-style:none;padding:0;margin:4px 0 6px;display:grid;gap:8px}
.opcoes li{padding:10px 14px;background:var(--tint);border-left:4px solid var(--copper);border-radius:4px}
.opcoes b{color:var(--accent);margin-right:4px}
.orc{width:100%;border-collapse:collapse;margin:8px 0 4px;background:var(--surface);border:1px solid var(--rule);border-radius:6px;overflow:hidden;font-size:15.5px}
.orc td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.orc td:last-child{white-space:nowrap;text-align:right;font-weight:700}
.orc tr.total td{background:var(--tint);font-weight:700;border-bottom:0}
.orc-nota{font-size:13.5px;color:var(--muted)}
/* bonuses by step */
.lista-job{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.lista-job li{padding:8px 0;border-bottom:1px solid var(--rule);font-size:16px}
.lista-job li:last-child{border-bottom:0}
.tag{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:3px;
  border:1px solid var(--rule);color:var(--muted);vertical-align:middle;white-space:nowrap}
.tag.completo{background:var(--dark-2);color:var(--copper-light);border-color:var(--dark-2)}
.passos > li > table.orc,.passos > li > .orc-nota{grid-column:1 / -1}
.orc td:first-child{width:auto}
.tag.dois{background:var(--tint);color:var(--ink);border-color:var(--copper)}

/* app screenshots in phone frames (preview section) */
.fones{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 2px 20px;margin:26px 0 10px;-webkit-overflow-scrolling:touch}
.fone{flex:0 0 min(66vw,270px);scroll-snap-align:center;margin:0}
.fone img{width:100%;height:auto;border:7px solid #05090f;border-radius:32px;box-shadow:0 22px 44px rgb(0 0 0 / .5),0 0 0 1px var(--copper);background:#05090f}
.fone figcaption{margin-top:14px;font-size:15px;line-height:1.45;color:color-mix(in srgb,var(--dark-ink) 86%,transparent)}
.fone figcaption b{color:var(--copper-light)}
.a4-h{font-family:var(--font-display);font-size:30px;line-height:1.1;margin:34px 0 8px;color:#fff}
@media (min-width:900px){.fones{overflow:visible;justify-content:flex-start;gap:40px}.fone{flex:0 0 270px}}
/* case study: calculation tucked away */
details.conta{margin-top:20px;border:1px solid var(--rule);border-left:4px solid var(--copper);border-radius:6px;background:var(--surface);padding:4px 18px}
details.conta summary{cursor:pointer;font-weight:700;padding:14px 0;color:var(--accent)}
details.conta[open] summary{border-bottom:1px solid var(--rule);margin-bottom:10px}
details.conta p{margin:10px 0}

/* ── design pass (2026-10-07) ───────────────────────────────────────────────────────────────── */
/* paler cream: the page's tint is strong when it covers a third of the page */
section.getoent{background:color-mix(in srgb,var(--tint) 55%,#fff)}
/* problem + why in one section */
.warum-box{margin-top:44px}
.warum-box h3{font-size:32px;text-transform:uppercase;line-height:1.05;margin-bottom:18px}
.job-h{font-size:30px;text-transform:uppercase;line-height:1.08;margin:48px 0 8px}
.cta-mitte{text-align:center;margin-top:34px}
/* hero: on phones the button comes before the image; the example box follows the image */
.hero-ex{grid-area:ex}
.hero-grid{grid-template-areas:"kopf" "rest" "bild" "ex"}
@media (min-width:900px){
  .hero-grid{grid-template-areas:"kopf bild" "rest bild" "ex bild"}
  .hero-bild{align-self:center}
  .hero-ex .beispiel{margin-top:0}
}
/* phones in the preview section: centred on wide screens */
@media (min-width:900px){.fones{justify-content:center}}
/* plan cards: same height, price + button pinned to the bottom */
.preiskarte{display:flex;flex-direction:column}
.preiskarte ul{flex:1 1 auto}
.preis-note{margin:2px 0 14px;font-weight:700}
/* small text: a touch darker and larger */
.plano-resumo,.aviso-preco{color:var(--ink)}
.aviso-preco{opacity:.8}
.preiskarte .preis ~ p{color:color-mix(in srgb,var(--dark-ink) 82%,transparent);font-size:15px}
.preiskarte.hell .preis ~ p{color:var(--ink);opacity:.85}
.preiskarte p.preis-note{color:var(--copper-light);font-size:16px;opacity:1}
.preiskarte.hell p.preis-note{color:var(--accent)}
.tag{font-size:12.5px}

/* plain plan card: what only the full plan adds, greyed out */
.preiskarte li.nao{opacity:.5}
.preiskarte li.nao::before{content:"✕";color:var(--muted)}
.preiskarte li.nao-titel{padding-left:0;margin-top:6px;border-bottom:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.preiskarte li.nao-titel::before{content:none}

/* phones: the plain plan card stays short (the greyed list is for the side-by-side view) */
@media (max-width:819px){ .preiskarte li.nao,.preiskarte li.nao-titel{display:none} }

/* hero badge that names the app (the product is not only a PDF) */
.app-badge{display:inline-flex;align-items:center;gap:8px;margin:2px 0 14px;padding:6px 14px 6px 10px;border:1px solid color-mix(in srgb,var(--copper) 70%,transparent);
  border-radius:999px;font-size:14px;font-weight:700;color:var(--copper-light);background:color-mix(in srgb,var(--dark-ink) 5%,transparent)}
.app-linha{font-size:18px;margin:-6px 0 24px;max-width:70ch}

/* demo video in a phone frame, next to the screenshots (4 phones fit the wide layout) */
.fone video{display:block;width:100%;height:auto;border:7px solid #05090f;border-radius:32px;box-shadow:0 22px 44px rgb(0 0 0 / .5),0 0 0 1px var(--copper);background:#05090f}
@media (min-width:900px){.fones{gap:28px}.fone{flex:0 0 244px}}

/* ── images from the supplied set (2026-10-07) ─────────────────────────────────────────────── */
/* hero: square on desktop, landscape on phones; never cropped */
.hero-bild picture{display:block}
.hero-bild img{width:100%;height:auto;display:block}
/* problem section: text + the illustrative photo side by side on desktop, photo hidden on phones (page length) */
.warum-bild{display:none;margin:0}
.warum-bild img{width:100%;height:auto;border-radius:6px;box-shadow:0 20px 44px color-mix(in srgb,var(--ink) 20%,transparent),0 0 0 1px var(--rule)}
.warum-bild figcaption{font-size:13px;color:var(--muted);margin-top:8px}
@media (min-width:900px){
  .warum-box{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;max-width:none}
  .warum-bild{display:block;grid-column:2;grid-row:1}
  .warum-texto{grid-column:1;grid-row:1}
}
/* examples figure (tap to enlarge) */
.exemplos{margin:34px 0 0}
.exemplos button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.exemplos img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 20px 44px color-mix(in srgb,var(--ink) 20%,transparent),0 0 0 1px var(--rule)}
.exemplos figcaption{font-size:15px;color:var(--muted);margin-top:10px;max-width:70ch}
/* overview image: label as HTML text */
.bild-breit{position:relative}
.bild-label{display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:3px;background:var(--dark-2);color:var(--copper-light);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.bild-breit figcaption{font-size:14px;color:var(--muted);margin-top:10px}
/* job cards: a small picture of the material, same size in all four */
.job-img{margin:0 0 14px}
.job-img img{width:150px;height:150px;display:block;border-radius:6px;box-shadow:0 0 0 1px var(--rule)}
.job-img figcaption{margin-top:8px}
.job-img figcaption .tag{margin-left:0}
/* plan card images are square now */
.stufen-bild{aspect-ratio:auto;height:auto}

/* labels inside the job cards may wrap on a phone (the .tag chips are nowrap elsewhere) and grid children may shrink */
.karten > *{min-width:0}
.job-img figcaption .tag{white-space:normal;line-height:1.35}

/* ── "Do pedido ao orçamento": four steps in one row, one legend instead of a chip on every line ─────────────── */
.legenda{display:block;margin:4px 0 22px;font-size:15px;color:var(--ink)}
.legenda .lg.comp{margin-left:24px}
.lg{display:inline-block;width:11px;height:11px;margin-right:8px;vertical-align:-1px}
.lg.dois,.etapa-mat li.dois::before{background:var(--copper);border-radius:50%}
.lg.comp,.etapa-mat li.comp::before{background:var(--dark-2);transform:rotate(45deg);border-radius:2px}
.etapas{list-style:none;padding:0;margin:0;display:grid;gap:16px;grid-template-columns:1fr;position:relative}
@media (min-width:720px){.etapas{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.etapas{grid-template-columns:repeat(4,1fr);gap:18px}
  .etapas::before{content:"";position:absolute;left:12%;right:12%;top:44px;border-top:2px dashed var(--copper);opacity:.55;z-index:0}}
.etapa{position:relative;z-index:1;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:22px 20px 20px;
  box-shadow:0 10px 28px color-mix(in srgb,var(--ink) 7%,transparent);min-width:0}
.etapa-nr{position:absolute;top:14px;right:16px;font-family:var(--font-display);font-size:38px;line-height:1;color:color-mix(in srgb,var(--copper) 45%,transparent)}
.etapa-ic{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--dark-2);border:2px solid var(--copper);color:var(--copper-light);margin-bottom:14px}
.etapa-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.etapa h3{font-size:25px;line-height:1.08;margin:0 0 6px}
.etapa-faz{margin:0 0 14px;color:var(--muted);font-size:16px}
.etapa-mat{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.etapa-mat li{position:relative;padding:11px 0 11px 24px;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.4}
.etapa-mat li:last-child{border-bottom:0}
.etapa-mat li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:10px}

/* the six bonuses: short cards, icon left on phones (one column), three columns on desktop */
.bonus-h{margin-top:44px}
.bonus-lista{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:720px){.bonus-lista{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.bonus-lista{grid-template-columns:repeat(3,1fr);gap:16px}}
.bonus-card{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--copper);
  border-radius:var(--radius);padding:16px 16px 14px;min-width:0}
.bonus-ic{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--dark-2);border:2px solid var(--copper);color:var(--copper-light)}
.bonus-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bonus-nr{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--copper);font-weight:700;margin-bottom:2px}
.bonus-card h4{font-size:20px;line-height:1.15;margin:0 0 4px}
.bonus-card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.4}

/* step numbers come from a CSS counter (decoration, not page text) */
.etapas{counter-reset:et}
.etapa{counter-increment:et}
.etapa-nr::before{content:counter(et)}

/* examples: desktop shows the two-page spread, phones show the Kit quote large (only one version at a time) */
.exemplos .ex-mob{display:none}
@media (max-width:767px){ .exemplos .ex-desk{display:none} .exemplos .ex-mob{display:block} }

/* closing call to action: cream (not dark), so the dark footer below it is a different block */
section.schluss{text-align:center;border-top:4px solid var(--copper)}
section.schluss h2::after{margin-left:auto;margin-right:auto}
section.schluss p{margin-left:auto;margin-right:auto}
section.schluss .cta-unter{color:var(--muted)}
section.schluss .eng > *{margin-left:auto;margin-right:auto}

.danke-passo{font-size:20px;line-height:1.5;margin:0 0 6px}