/* Site header. On a wide screen it is one row: logo, then links, CTA and the
   language switch pushed right — that needs about 820px, and below it the nav
   used to wrap into ragged rows beside a vertically-centred logo. So the links
   move to a row of their own: on a tablet under the logo/CTA/language line, and
   on a phone (where logo + CTA already fill the line) sharing their row with the
   language switch. The audience link is dropped on the phone layout — it points
   at a homepage section the logo also reaches, and losing it is what keeps the
   remaining links on one line.
   The header's own styles are inline (see the [lang] layout), so every override
   here needs !important to win against them. */

/* Guides and the calculators print their own language row, which knows which
   translations actually exist and where they live — the header's generic DE·EN
   only rewrites the URL segment, so on those pages it was both a duplicate and
   the less reliable of the two. It stands down where a page brings its own. */
body:has(.page-langswitch) .site-nav-lang { display: none !important; }

@media (max-width: 860px) {
  .site-header-inner { flex-wrap: wrap; row-gap: 10px !important; column-gap: 16px !important; }
  .site-nav-cta { order: 2; margin-left: auto; }
  .site-nav-lang { order: 3; }
  .site-nav { order: 4; width: 100%; margin-left: 0 !important; gap: 18px !important; }
}
@media (max-width: 560px) {
  .site-header-inner { column-gap: 14px !important; }
  .site-nav { order: 3; width: auto; gap: 14px !important; }
  .site-nav-lang { order: 4; margin-left: auto; }
  .site-nav-audience { display: none; }
  .site-nav-cta { font-size: 13px !important; padding: 7px 14px !important; }
}

/* --- sitemap footer ---------------------------------------------------------
   Wide: one flex row, brand on the left, the four link columns pushed right by
   the spacer. Narrow: a grid, because wrapped flex items line up per row rather
   than per column — at phone widths that left the first column stranded beside
   the logo and every following row starting at a different x. */
.site-foot {
  display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start;
}
.site-foot-gap { flex: 1; min-width: 12px; }
.site-foot-col { min-width: 150px; }
@media (max-width: 860px) {
  .site-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .site-foot > :first-child { grid-column: 1 / -1; }
  .site-foot-gap { display: none; }
  .site-foot-col { min-width: 0; }
}
@media (max-width: 560px) {
  .site-foot { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

.guide-body { font-size: 17px; line-height: 1.7; color: #1d1d1f; }
/* Matches .g-h2 exactly — the markdown body sits between the template's own
   sections, so its headings have to be the same object as theirs or the page
   reads as two documents stapled together. */
.guide-body h2 {
  font-size: 28px; line-height: 1.2; margin: 46px 0 16px;
  letter-spacing: -0.02em; font-weight: 700; color: #1d1d1f;
}
.guide-body h3 { font-size: 19px; margin: 30px 0 10px; font-weight: 700; letter-spacing: -0.01em; color: #1d1d1f; }
.guide-body p { margin: 0 0 16px; }
.guide-body ul, .guide-body ol { margin: 0 0 16px; padding-left: 22px; }
.guide-body li { margin: 6px 0; }
.guide-body a { color: #2f7a12; text-decoration: underline; text-underline-offset: 2px; }
.guide-body strong { font-weight: 700; }

/* Product CTA at the end of a guide, rendered as a filled pill button */
.guide-body a.guide-cta-button {
  display: inline-block; margin: 4px 0 8px;
  padding: 14px 28px; border-radius: 100px;
  background: #0a1f05; color: #fbfbfd;
  font-weight: 700; text-decoration: none;
  transition: background .2s, transform .2s;
}
.guide-body a.guide-cta-button:hover { background: #12300a; transform: translateY(-2px); }

/* The one critical-warning blockquote */
.guide-body blockquote {
  margin: 20px 0; padding: 14px 18px;
  background: #fff6e6; border-left: 4px solid #ffb020;
  border-radius: 0 8px 8px 0;
}
.guide-body blockquote p:last-child { margin-bottom: 0; }

/* Tables — the part that looked broken */
.guide-body table {
  width: 100%; border-collapse: collapse; margin: 22px 0;
  font-size: 15.5px; background: #fff;
  border: 1px solid #e7e7ea; border-radius: 18px; overflow: hidden;
}
.guide-body thead th {
  text-align: left; background: #f5f5f7; color: #1d1d1f;
  font-weight: 700; padding: 14px 22px; border-bottom: 1px solid #e7e7ea;
}
.guide-body tbody td {
  padding: 14px 22px; border-top: 1px solid #e7e7ea; vertical-align: top;
}
/* In a two-column table the last cell is SOMETIMES the figure, and when it is it
   carries the emphasis the template gives a result column. It was applied to all
   of them, which was wrong for 119 of the 143: a bolded, right-aligned sentence
   has a ragged left edge and reads as separated from the label it explains.
   GuideBody now measures the column and adds .is-figures only where every cell is
   short, so prose columns simply read left to right. Still guarded to two columns:
   on three the rule put a whole sentence on one unwrappable line. */
.guide-body table.is-figures tbody tr:not(:has(td:nth-child(3))) td:last-child {
  font-weight: 600; text-align: right;
}
.guide-body table.is-figures thead tr:not(:has(th:nth-child(3))) th:last-child { text-align: right; }
/* A prose column gets room to be read instead: the label stays narrow, the
   explanation takes the rest, and neither is forced to wrap early. */
.guide-body table:not(.is-figures) tbody tr:not(:has(td:nth-child(3))) td:first-child { width: 34%; }
/* A wide table scrolls inside a wrapper (see GuideBody) rather than widening the
   column. The wrapper is load-bearing: making the TABLE itself the scroll box
   means display:block, which turns thead and tbody into two independent tables
   that size their columns separately — the header stops lining up with the rows
   under it. */
.guide-table-wrap { overflow-x: auto; margin: 22px 0; }
.guide-table-wrap > table { margin: 0; min-width: 34em; }
.guide-body table + p { margin-top: 4px; }

@media (max-width: 560px) {
  .guide-body table { font-size: 14px; }
  .guide-body thead th, .guide-body tbody td { padding: 9px 11px; }
}

/* The inline product link inside one "Nächste Schritte" step. It has to read as
   part of the step, not as a button dropped into it — so: same size as the step
   text, no background, and only the weight and colour marking it as a link. */
.g-step-link { color: #2f7a12; font-weight: 700; text-decoration: none; white-space: normal; }
.g-step-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The mid-article ProofBlock — the other product placement, and deliberately the
   opposite object to the dark card below it. Light ground, one lime rule down the
   left edge, full column width. Two dark cards on one page and the reader filters
   out both; a light block that is nonetheless the loudest thing in the column
   gets read instead. No border-radius on the left so the rule reads as a margin
   mark against the prose rather than a pill floating beside it. */
.proof-block {
  margin: 40px 0 0;
  padding: 28px 32px 30px;
  background: #f1f6ec;
  border: 1px solid #dbe7d2;
  border-left: 5px solid #2f7a12;
  border-radius: 0 16px 16px 0;
  box-shadow: 0 1px 2px rgba(10, 31, 5, 0.04), 0 10px 30px -20px rgba(10, 31, 5, 0.5);
}
/* The handover line. Same small-caps label the other sections use, so the block
   announces itself as a placement rather than pretending to be more prose. */
.proof-block-lead {
  margin: 0 0 10px; color: #2f7a12; font-weight: 800;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.proof-block-head {
  margin: 0; color: #14330a; font-weight: 800;
  font-size: clamp(21px, 2.3vw, 25px); line-height: 1.22; letter-spacing: -0.022em;
  text-wrap: balance;
}
.proof-block-sub {
  margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: #3f4c39;
  max-width: 60ch; text-wrap: pretty;
}
/* A real button, not a text link. At the foot of the page the dark card can rely
   on its own contrast to be seen; in the middle of the prose the block has to
   earn attention against the article around it, and the filled control is what
   does that. Dark green on the light ground rather than the card's lime pill, so
   the two placements still read as two different objects. */
.proof-block-link {
  display: inline-block; margin-top: 20px;
  background: #2f7a12; color: #fff;
  font-weight: 700; font-size: 16.5px; padding: 13px 22px;
  border-radius: 12px; text-decoration: none;
}
.proof-block-link:hover { background: #256010; }
.proof-block-note { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #5f6b59; }

/* The phone-only bar that follows the reader (StickyCta). Hidden outright above
   700px, where the sticky header still carries its own badge and this would be
   the same offer twice on one screen. It is a bar rather than a floating pill
   because the badge is Apple's artwork at a fixed ratio, and a pill would either
   crop it or float a white rectangle over the prose. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 251, 253, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(20, 40, 10, 0.12);
  box-shadow: 0 -6px 24px rgba(10, 31, 5, 0.08);
  transform: translateY(105%);
  visibility: hidden;
  /* visibility is switched, never transitioned: on the way in it applies at once
     so the bar is present from the first frame of the slide, and on the way out
     it is delayed by exactly the slide so the bar is still there to slide. An
     earlier version put visibility in the transition list, which made the bar's
     presence depend on a transition running to completion. */
  transition: visibility 0s linear 0.22s;
}
.sticky-cta.is-in { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.sticky-cta-line {
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: #0a1f05;
  min-width: 0;
}
@media (max-width: 700px) {
  .sticky-cta { display: flex; }
  /* The closing card is the last thing above the sources, and the bar is gone by
     the time it arrives — but the sources and footer still scroll under it, so
     the page keeps a bar's worth of room at the end. */
  .g-shell { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sticky-cta { transition: transform 0.22s ease, visibility 0s linear 0.22s; }
  .sticky-cta.is-in { transition: transform 0.22s ease, visibility 0s; }
}
@media (max-width: 560px) {
  .proof-block { padding: 22px 18px 24px; }
  .proof-block-sub { font-size: 16px; }
  /* Full width and centred on a phone. The side padding is trimmed because at
     22px it pushed the English and German labels onto a second line even though
     the text itself fits; the longer French label still wraps, which is fine. */
  .proof-block-link { display: block; text-align: center; font-size: 16px; padding: 14px 16px; }
}

/* The product CTA (ScanCta) — the page's one offer, in the same dark card as
   the answer above it: mint glow behind the corner, headline, one line of what
   to do, one lime button. */
.scan-cta { position: relative; overflow: hidden; }
.scan-cta::before {
  content: ""; position: absolute; top: -150px; right: -90px;
  width: 400px; height: 400px; border-radius: 50%;
  background: rgba(159, 232, 112, 0.13); pointer-events: none;
}
.scan-cta > * { position: relative; }
.scan-cta-head {
  margin: 0; color: #fff; font-weight: 700;
  /* 27px, down from 30: the headlines went from epigrams of about ten words to
     plain sentences of about thirteen, and German compounds at 30px were leaving
     one-word lines ("... begründet. Ein / Scan hält sie fest."). The max-width is
     not what binds here — the copy column beside the specimen report is narrower
     than 30ch at this size — so the size is what had to give. */
  font-size: clamp(21px, 2.4vw, 27px); line-height: 1.16; letter-spacing: -0.02em;
  max-width: 30ch; text-wrap: balance;
}
.scan-cta-sub {
  margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: #c9d4c2;
  max-width: 52ch; text-wrap: pretty;
}
.scan-cta-btn {
  display: inline-block; margin-top: 26px;
  background: #9fe870; color: #0a1f05;
  font-weight: 700; font-size: 16px; padding: 15px 24px;
  border-radius: 14px; text-decoration: none;
}
.scan-cta-btn:hover { background: #b4ef8e; }
/* The price note, directly under the button. Quieter than the
   sub-line above it (that one argues, this one just states the terms) but still
   8.3:1 on the card, well clear of AA — a price note nobody can read is worse
   than no price note. */
.scan-cta-note {
  margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #a8b8a0;
}
/* The badge row, and the way back to the business landing page beside it. Both
   classes were in the markup with no rules behind them, which left the link
   rendering as a default blue underline on the dark card. */
.scan-cta-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 22px;
}
.scan-cta-link {
  color: #9fe870; font-weight: 600; font-size: 15px; text-decoration: none;
}
.scan-cta-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The house-ad band (ScanCta mode="ad"): the same offer on a guide that is not
   about the flat, so it is a band and not a card. No specimen report, a smaller
   headline, and the badge and price sitting on a row with the copy rather than
   under it — the whole object is about a third the height of the tied card,
   which is the point. */
.scan-cta.is-ad::before {
  top: -170px; right: -80px; width: 320px; height: 320px;
}
.scan-cta.is-ad .scan-cta-head {
  font-size: clamp(20px, 2.1vw, 25px); max-width: 28ch;
}
.scan-cta.is-ad .scan-cta-sub {
  margin-top: 9px; font-size: 15.5px; max-width: 42ch;
}
.scan-cta-ad-copy { flex: 1 1 300px; min-width: 0; }
/* Right-aligned so the badge sits on the band's trailing edge and the price note
   hangs under it, reading as one block rather than as two stray lines. */
.scan-cta-ad-foot {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  /* Capped so the price note wraps to two short lines instead of holding the
     band open on one long one — the copy needs that width more than the note
     does, and a headline on three lines beside a one-line note reads lopsided. */
  max-width: 200px;
}
/* The closing triad. Lime and a shade smaller than the sub-line above it: it is
   the line that has to survive a skim, and colour does that better than size on
   a band this short. */
.scan-cta-ad-kicker {
  margin: 12px 0 0; font-size: 15px; line-height: 1.45; font-weight: 700;
  color: #9fe870; letter-spacing: -0.005em;
}
/* Balanced so the price note breaks at its own dash rather than orphaning the
   last two words of the joke. */
.scan-cta.is-ad .scan-cta-note { margin-top: 9px; text-wrap: balance; }
.scan-cta-ad-foot .scan-cta-link { margin-top: 8px; }

/* Stack the scan video above the copy on narrow screens. */
@media (max-width: 620px) {
  .scan-cta {
    flex-direction: column; align-items: flex-start !important;
    text-align: left; gap: 24px !important; padding: 26px 22px !important;
  }
  .scan-cta-sub { font-size: 16px; }
  /* The band stacks the same way, but its two halves are copy and action rather
     than graphic and copy, so the gap between them is smaller and the badge
     block goes back to the left edge with everything else. */
  .scan-cta.is-ad { gap: 18px !important; }
  /* flex-basis is a height once the band is a column, so the 300px that keeps
     the copy from collapsing beside the badge would otherwise pad it out to
     300px tall with nothing in it. */
  .scan-cta-ad-copy { flex: 0 0 auto; }
  .scan-cta-ad-foot { align-items: flex-start; text-align: left; max-width: none; }
}


/* ==========================================================================
   Ratgeber page template
   --------------------------------------------------------------------------
   A guide is a fixed sequence of sections in a two-column shell: the article,
   and a sticky sidebar carrying the one number that matters plus the onward
   links. Sections may be dropped, never reordered — so this file styles slots,
   and the page decides which of them have content.

   Palette (the site's): ink #1d1d1f, muted #6e6e73, rule #e7e7ea, panel
   #f5f5f7, mint tint #eef6e8, green #2f7a12, dark #0a1f05, lime #9fe870.

   The muted grey was #86868b until a contrast sweep measured it at 3.33-3.62:1
   against the three page surfaces, under the 4.5:1 WCAG AA needs for body text
   — and it carries real content here, not just metadata: breadcrumbs, byline,
   lede, FAQ answers, sources, disclaimer, figure captions. #6e6e73 is the next
   step down the same grey ramp and clears 4.66-5.07:1 on all three. Anything
   lighter fails somewhere; keep new muted text at or below this value.
   ========================================================================== */

.g-shell {
  max-width: 1120px; margin: 0 auto; padding: 40px 48px 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 52px; align-items: start;
}
.g-main { min-width: 0; }
/* Sticky pins the top of the column, so anything past the fold in a sidebar
   taller than the window can never be scrolled to. The stack was already just
   over a laptop viewport before the Begriffe card joined it; giving the column
   its own scroll keeps every card reachable instead of clipping the last one.
   align-self:start stops the grid from stretching it to the article's height,
   which would make the max-height meaningless. */
.g-aside {
  position: sticky; top: 100px; align-self: start; display: grid; gap: 16px;
  max-height: calc(100vh - 124px); overflow-y: auto;
  /* the scrollbar sits over the card border otherwise */
  padding-right: 4px; margin-right: -4px;
}

/* --- breadcrumb + language row --- */
.g-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: #6e6e73; font-weight: 500;
  min-width: 0;
}
.g-crumbs a { color: #6e6e73; text-decoration: none; white-space: nowrap; }
.g-crumbs a:hover { color: #1d1d1f; }
/* The last crumb is the guide title, which on these pages is a full SERP title
   and routinely 60+ characters. One line, clipped — the H1 underneath says it
   in full a moment later. */
.g-crumbs .g-crumb-here {
  color: #1d1d1f; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* --- headline + byline --- */
.g-h1 {
  font-size: clamp(32px, 5vw, 50px); line-height: 1.06; letter-spacing: -0.025em;
  font-weight: 700; margin: 20px 0 0; max-width: 22ch; text-wrap: balance;
}
.g-byline {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 22px; padding-bottom: 22px; border-bottom: 1px solid #e7e7ea;
  font-size: 14px; color: #6e6e73; font-weight: 500;
}
.g-byline .g-scope { color: #2f7a12; }

/* --- the answer card: the whole answer, before anything else --- */
.g-answer {
  background: #0a1f05; border-radius: 16px; padding: 38px 40px;
  margin-top: 30px; position: relative; overflow: hidden;
}
.g-answer::before {
  content: ""; position: absolute; top: -140px; right: -80px;
  width: 380px; height: 380px; border-radius: 50%;
  background: rgba(159, 232, 112, 0.13);
}
.g-answer > * { position: relative; }
.g-answer-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: #9fe870;
}
/* The guide's topic, restated inside the card so the answer below it is not
   left hanging — see cardLead() in the guide page. Sits between the label and
   the answer, quieter than both. */
.g-answer-lead {
  font-size: 15.5px; line-height: 1.4; font-weight: 600; letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.66); margin: 10px 0 0; max-width: 42ch;
}
.g-answer-text {
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.18; letter-spacing: -0.02em;
  font-weight: 700; color: #fff; margin: 14px 0 0; max-width: 30ch; text-wrap: balance;
}
/* Guides that have not been given a one-sentence answer: fall back to the first
   sentence of the excerpt, and those run long. Two step-downs, because one is
   not enough: a 450-character sentence set at headline weight is a wall, and a
   third of the guides have one. The longest tier stops being a headline
   altogether and reads as an opening paragraph. */
.g-answer-text.is-long { font-size: clamp(20px, 2.4vw, 25px); max-width: 46ch; }
.g-answer-text.is-xlong {
  font-size: clamp(17.5px, 1.9vw, 21px); line-height: 1.45;
  font-weight: 600; letter-spacing: -0.01em; max-width: 58ch;
}
.g-answer-sub {
  font-size: 17px; line-height: 1.55; color: #c9d4c2;
  margin: 16px 0 0; max-width: 56ch; text-wrap: pretty;
}
.g-answer-pill {
  display: inline-block; margin-top: 22px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; color: #9fe870;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 9px 15px; border-radius: 30px; text-decoration: none;
}
.g-answer-pill:hover { background: rgba(255, 255, 255, 0.12); color: #9fe870; }
/* Short-guide layout (cta_mid): the answer goes quiet, light ground and regular
   weight, so the dark product card below is the one bold object on the page. */
.g-answer.is-plain { background: #f4f6f1; padding: 30px 32px; }
.g-answer.is-plain::before { display: none; }
.g-answer.is-plain .g-answer-label { color: #2f7a12; }
.g-answer.is-plain .g-answer-lead { color: #6e6e73; font-weight: 500; }
.g-answer.is-plain .g-answer-text {
  color: #1d1d1f; font-weight: 500; font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.3; letter-spacing: -0.01em; max-width: 40ch;
}
.g-answer.is-plain .g-answer-sub { color: #3a3a3c; }
.g-answer.is-plain .g-answer-pill {
  color: #2f7a12; background: #fff; border-color: rgba(10, 31, 5, 0.12);
}
.g-answer.is-plain .g-answer-pill:hover { background: #fff; color: #256010; }

/* --- section chrome --- */
.g-sec { margin-top: 46px; }
.g-h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; margin: 0; }
.g-lede { font-size: 17px; line-height: 1.6; color: #6e6e73; margin: 12px 0 0; max-width: 62ch; text-wrap: pretty; }
.g-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: #6e6e73;
}

/* --- numbered lists: "In 60 Sekunden" and "Nächste Schritte" --- */
.g-nums { display: grid; gap: 10px; margin-top: 20px; }
.g-num-row {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  align-items: start; border-bottom: 1px solid #e7e7ea; padding-bottom: 14px;
}
.g-num {
  width: 26px; height: 26px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  background: #eef6e8; color: #2f7a12;
}
.g-nums.is-steps .g-num { background: #f5f5f7; color: #1d1d1f; }
.g-num-row p { margin: 0; font-size: 17px; line-height: 1.6; text-wrap: pretty; }

/* --- the checklist (checklist:), room by room, for guides whose answer IS a list --- */
.g-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.g-check-group { border: 1px solid #e7e7ea; border-radius: 14px; padding: 18px 20px; background: #fff; }
.g-check-group h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #1d1d1f; }
.g-check-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.g-check-group li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.45; }
.g-check-group li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px;
  border: 1.5px solid #2f7a12; border-radius: 5px; background: #eef6e8;
}
@media (max-width: 620px) { .g-check { grid-template-columns: 1fr; } }
/* The contrast: the whole list you would tick off yourself, beside the scan. */
.g-vs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; align-items: start; }
.g-vs .g-check { grid-template-columns: 1fr; margin-top: 12px; gap: 10px; }
.g-vs .g-check-group { padding: 14px 16px; }
.g-vs .g-check-group li { font-size: 15px; }
.g-vs-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6e6e73;
}
.g-vs-label.is-alt { color: #9fe870; }
.g-vs-alt { position: sticky; top: 96px; }
.g-vs-alt-inner {
  background: #0a1f05; color: #fbfbfd; border-radius: 16px; padding: 24px 22px;
  position: relative; overflow: hidden;
}
.g-vs-alt-inner::before {
  content: ""; position: absolute; top: -120px; right: -90px; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(159, 232, 112, 0.13); pointer-events: none;
}
.g-vs-alt-inner > * { position: relative; }
.g-vs-alt-head {
  margin: 10px 0 0; font-size: clamp(21px, 2.3vw, 25px); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; color: #fff;
}
.g-vs-alt ol { margin: 16px 0 20px; padding: 0; list-style: none; counter-reset: vs; display: grid; gap: 10px; }
.g-vs-alt li {
  counter-increment: vs; position: relative; padding-left: 34px;
  font-size: 15.5px; line-height: 1.45; color: #e3eadd;
}
.g-vs-alt li::before {
  content: counter(vs); position: absolute; left: 0; top: -1px; width: 24px; height: 24px;
  border-radius: 8px; background: #9fe870; color: #0a1f05; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.g-vs-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: #c9d4c2; }
@media (max-width: 760px) {
  .g-vs { grid-template-columns: 1fr; }
  .g-vs-alt { position: static; }
}

/* --- the statute, quoted --- */
.g-quote {
  margin: 20px 0 0; border: 1px solid #e7e7ea; border-radius: 20px;
  background: #f5f5f7; padding: 26px 28px;
}
.g-quote p { margin: 0; font-size: 17px; line-height: 1.7; color: #1d1d1f; text-wrap: pretty; }
.g-quote footer { margin-top: 14px; font-size: 13.5px; color: #6e6e73; font-weight: 600; }
.g-quote footer a { color: #6e6e73; }

/* ============ story guide layout (StoryGuide.tsx) ============ */
.sg { max-width: 880px; margin: 0 auto; padding: 44px 24px 96px; color: #111; }
.sg-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sg-eyebrow, .sg-label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #2f7a12; text-decoration: none;
}
.sg-label.is-lime { color: #9fe870; }
.sg-share {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: #1d1d1f; padding: 6px 4px;
}
.sg-share:hover { color: #2f7a12; }
.sg-h1 {
  font-size: clamp(38px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800;
  margin: 18px 0 0; text-wrap: balance;
  /* German compounds ("Kleinreparaturklausel:") are wider than a phone; unbroken they widened the whole page. */
  overflow-wrap: break-word; hyphens: auto;
}
.sg-subtitle { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.5; color: #555; margin: 22px 0 0; max-width: 60ch; text-wrap: pretty; }
.sg-meta {
  display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; color: #6e6e73; margin-top: 30px;
  padding-bottom: 30px; border-bottom: 1px solid #e5e5e8;
}
.sg-summary { background: #f3f5f0; border-radius: 28px; padding: 40px 44px; margin-top: 40px; }
.sg-summary p { margin: 18px 0 0; font-size: clamp(20px, 2.3vw, 25px); line-height: 1.5; color: #555; text-wrap: pretty; }
.sg-sec { margin-top: 84px; }
.sg-h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 500; margin: 0; color: #111; }
.sg-lede { font-size: 18px; line-height: 1.6; color: #6e6e73; margin: 16px 0 0; max-width: 64ch; text-wrap: pretty; }
.sg-list { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid #e5e5e8; }
.sg-list li { display: grid; grid-template-columns: 48px 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid #e5e5e8; }
.sg-num {
  width: 44px; height: 44px; border-radius: 999px; background: #eef6e9; color: #2f7a12; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.sg-list h3 { margin: 6px 0 0; font-size: 21px; font-weight: 500; line-height: 1.3; }
.sg-list p { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: #6e6e73; }
.sg-contrast {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 30px; border: 1px solid #e5e5e8; border-radius: 26px; overflow: hidden;
}
.sg-contrast-col { padding: 34px 36px 22px; }
.sg-contrast-col.is-before { background: #fafafa; border-right: 1px solid #e5e5e8; }
.sg-contrast-col h3 { margin: 0 0 12px; font-size: 21px; font-weight: 500; }
.sg-contrast-col ul { list-style: none; margin: 0; padding: 0; }
.sg-contrast-col li { padding: 16px 0; font-size: 17px; border-bottom: 1px solid #e8e8eb; }
.sg-contrast-col li:last-child { border-bottom: 0; }
.sg-product { margin-top: 84px; background: #1a3010; border-radius: 32px; padding: 52px 56px; color: #fbfbfd; }
.sg-product-h { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; margin: 14px 0 0; color: #fbfbfd; }
.sg-product-text { font-size: 19px; line-height: 1.6; color: #e3ebdd; margin: 20px 0 0; max-width: 60ch; text-wrap: pretty; }
.sg-product-closer { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; letter-spacing: -0.015em; font-weight: 500; margin: 44px 0 0; color: #fbfbfd; }
.sg-product-why { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.35; font-weight: 600; margin: 18px 0 0; color: #9fe870; max-width: 40ch; text-wrap: pretty; }
.sg-product-gap { display: block; margin-top: 52px; }
.sg-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.sg-tile { background: rgba(255, 255, 255, 0.07); border-radius: 20px; padding: 24px 26px; }
.sg-tile h3 { margin: 0; font-size: 18px; font-weight: 700; color: #fbfbfd; }
.sg-tile p { margin: 8px 0 0; font-size: 16.5px; line-height: 1.55; color: #e3ebdd; }
.sg-product-cta { margin-top: 38px; }
.sg-button {
  display: inline-flex; align-items: center; gap: 10px; background: #b8e693; color: #0a1f05; font-weight: 700; font-size: 18px;
  border-radius: 999px; padding: 20px 36px; text-decoration: none;
}
.sg-button:hover { background: #c7eda9; }
.sg-cta-note { margin: 16px 0 0; font-size: 15px; color: #b9c6b0; }
/* The small mid-article recommendation (StoryGuide .sg-rec): text left, a small phone beside it. */
.sg-rec {
  margin-top: 64px; background: #f3f5f0; border-radius: 28px; padding: 34px 40px;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "h phone" "t phone" "b phone";
  column-gap: 40px; align-items: center; align-content: center;
}
.sg-rec-h { grid-area: h; align-self: end; margin: 0; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; color: #111; text-wrap: balance; }
.sg-rec-text { grid-area: t; margin: 12px 0 0; font-size: 17.5px; line-height: 1.55; color: #555; max-width: 46ch; text-wrap: pretty; white-space: pre-line; }
.sg-rec-cta { grid-area: b; align-self: start; margin-top: 22px; }
.sg-rec-steps { grid-area: s; list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.sg-rec-steps li { display: flex; align-items: center; gap: 12px; font-size: 16.5px; line-height: 1.35; color: #111; font-weight: 500; }
.sg-rec-step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #9fe870; color: #0a1f05; font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.sg-rec-soon { margin: 8px 0 0; font-size: 14px; color: #777; }
/* Note straight under the button; the desktop QR (inserted after the button) sits to the right of both. */
.sg-rec-cta:has(.sg-rec-soon) { display: grid; grid-template-columns: max-content auto; grid-template-rows: 1fr auto auto 1fr; justify-content: start; column-gap: 22px; }
.sg-rec-cta:has(.sg-rec-soon) > .sg-button { grid-column: 1; grid-row: 2; justify-self: start; }
.sg-rec-cta:has(.sg-rec-soon) > .sg-rec-soon { grid-column: 1; grid-row: 3; text-align: center; }
.sg-rec.has-steps { grid-template-areas: "h phone" "t phone" "s phone" "b phone"; }
.sg-rec.has-steps .sg-rec-cta > .sg-rec-soon { text-align: left; line-height: 1.5; }
.sg-rec-cta:has(.sg-rec-soon) > .bp-qr { grid-column: 2; grid-row: 1 / -1; margin-left: 0; }
.sg-rec .sg-button { font-size: 16px; padding: 14px 24px; white-space: nowrap; }
.sg-try { display: inline-flex; align-items: center; gap: 12px; padding: 15px 24px; border-radius: 14px; background: #2f7a12; color: #fff; text-decoration: none; }
.sg-try:hover { background: #276810; }
.sg-try b { display: block; font-size: 17px; font-weight: 800; line-height: 1.3; }
.sg-try small { display: block; font-size: 13.5px; font-weight: 500; color: #dff3d0; line-height: 1.35; }
.sg-rec-cta:has(.sg-try) { display: block; }
.sg-rec .sg-rec-cta > .sg-rec-soon.sg-try-note { margin: 10px 0 0; text-align: left !important; font-size: 14.5px; font-weight: 600; color: #2f7a12; }
.sg-rec-phone { grid-area: phone; }
.sg-rec-art { display: flex; align-items: center; justify-content: center; }
.sg-rec-paperw { width: 40%; max-width: 150px; position: relative; z-index: 1; margin-right: -5%; font-size: 7px; }
.bp-paper{position:relative;width:100%;aspect-ratio:4/5;box-sizing:border-box;overflow:visible;background:#fff;border-radius:.5em;box-shadow:0 1.2em 2.4em rgba(10,31,5,.22);padding:2em 1.5em 1.4em 2.3em;transform:rotate(-7deg);font-family:Manrope,system-ui,sans-serif;color:#0a1f05;text-align:left;line-height:1.2}.bp-paper-h{font-size:1.45em;font-weight:800;letter-spacing:-.02em;margin:0 0 .7em}.bp-paper-l{display:block;height:.3em;background:#dedede;border-radius:1em;margin:.55em 0}.bp-paper-s{font-size:.78em;font-weight:800;margin:1.3em 0 .55em}.bp-paper-2{display:flex;gap:.8em;margin:.55em 0}.bp-paper-2 i{flex:1;height:.3em;background:#dedede;border-radius:1em}.bp-paper-r{display:flex;align-items:center;gap:.5em;margin:.5em 0;font-size:.7em;font-weight:500}.bp-paper-r b{flex:none;width:.95em;height:.95em;border:1px solid #9a9a9a;border-radius:.18em}.bp-paper-r span{width:5.4em}.bp-paper-r i{flex:1;height:.32em;background:#e6e6e6;border-radius:1em}.bp-paper-pen{position:absolute;left:-1.4em;top:33%;width:30%;height:auto;filter:drop-shadow(0 .5em .8em rgba(0,0,0,.25))}
.sg-rec-plus { position: relative; z-index: 3; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #2f7a12; color: #fff; font-size: 24px; font-weight: 800; line-height: 38px; text-align: center; box-shadow: 0 8px 18px rgba(10,31,5,.25); margin: 0 -10px 0 -6px; }
.sg-rec-art .ss-demo { position: relative; z-index: 2; }
.sg-rec .ss-demo { --ss-s: 0.58; }
.sg-rec, .sg-rec.has-steps { grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: ". phone" "h phone" "t phone" "s phone" "b phone" ". phone"; align-content: stretch; }
.sg-rec-h, .sg-rec-text, .sg-rec-cta, .sg-rec-steps { align-self: start; }
.sg-rec .sg-rec-h { font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; }
.sg-rec .sg-rec-text { font-size: clamp(18px, 1.6vw, 21px); margin-top: 16px; max-width: 30ch; }
.sg-rec .sg-rec-cta { margin-top: 28px; }
.sg-rec.has-steps .ss-demo { --ss-s: 0.58; }
.sg-rec .ss-phone { box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.18); }
@media (max-width: 700px) {
  .sg-rec { margin-top: 48px; padding: 24px 20px; border-radius: 22px; column-gap: 18px; grid-template-areas: "h h" "t phone" "b b"; }
  .sg-rec.has-steps { grid-template-areas: "h h" "t phone" "s phone" "b b"; }
  .sg-rec-steps { margin-top: 14px; gap: 8px; }
  .sg-rec-steps li { font-size: 15px; gap: 10px; }
  .sg-rec-step-n { width: 22px; height: 22px; font-size: 12.5px; }
  .sg-rec-h { margin-bottom: 4px; }
  .sg-rec-text { font-size: 16px; }
  .sg-rec-cta { margin-top: 20px; }
  .sg-rec-text { align-self: center; margin-top: 8px; }
  .sg-rec .sg-button { font-size: 15px; padding: 12px 18px; }
  .sg-rec .ss-demo { --ss-s: 0.5; }
  .sg-rec, .sg-rec.has-steps { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "h" "t" "s" "phone" "b"; }
  .sg-rec .sg-rec-text { max-width: none; }
  /* Phones: the button and the Kaution line sit centred under the phone (owner, 2026-10-18). */
  .sg-rec .sg-rec-cta { text-align: center; }
  .sg-rec .sg-rec-cta > .sg-rec-soon.sg-try-note { text-align: center !important; }
  .sg-rec-phone { justify-self: center; margin-top: 22px; }
}


/* --- how it works inside the product card: steps, real app screens, tiles (ScanShowcase.tsx) --- */
.ss { margin-top: 44px; }
.ss { display: flex; justify-content: center; }
.ss-demo { --ss-s: 0.66; order: 2; display: flex; flex-direction: column; align-items: center; }
.ss-tiles { order: 1; }
.ss-scene > div { position: absolute; inset: 0; }
.ss-labels { list-style: none; margin: 18px 0 0; padding: 0; width: calc(390px * var(--ss-s) + 10px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ss-labels li { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; font-size: 12.5px; line-height: 1.3; font-weight: 600; color: rgba(255,255,255,.45); }
.ss-labels .ss-step-n { width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }
.ss-phone { background: #0b0d0b; border-radius: calc(60px * var(--ss-s) + 5px); padding: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.35); }
.ss-screen { position: relative; width: calc(390px * var(--ss-s)); height: calc(844px * var(--ss-s)); border-radius: calc(55px * var(--ss-s)); overflow: hidden; background: #f2f2f7; }
.ss-screen > div { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--ss-s)); transform-origin: 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; color: #111; line-height: 1.25; text-align: left; }
.ss-screen svg { width: 1em; height: 1em; display: block; flex: none; }
/* status bar + shared bits */
.ss-status { position: absolute; top: 0; left: 0; right: 0; height: 54px; padding: 18px 34px 0 50px; display: flex; justify-content: space-between; font-size: 17px; font-weight: 600; color: #111; z-index: 3; }
.ss-status.is-dark { color: #fff; }
.ss-status-r { display: flex; align-items: center; gap: 6px; }
.ss-bars { width: 18px; height: 11px; background: linear-gradient(90deg, currentColor 0 20%, transparent 20% 27%, currentColor 27% 47%, transparent 47% 54%, currentColor 54% 74%, transparent 74% 81%, currentColor 81%); clip-path: polygon(0 75%, 20% 75%, 20% 0, 100% 0, 100% 100%, 0 100%); opacity: .95; }
.ss-batt { width: 26px; height: 12px; border-radius: 4px; border: 1.5px solid currentColor; opacity: .9; box-shadow: inset 0 0 0 1.5px transparent; background: linear-gradient(90deg, currentColor 0 78%, transparent 78%); background-clip: content-box; padding: 1.5px; }
.ss-round { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.ss-round.is-light { background: none; color: #111; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
/* 1: capture */
.ss-cam { background: #222; }
.ss-cam-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scene 1: the camera view sweeps left to right, a little handheld sway, like someone walking the wall. */
.ss-cam-img { transform: scale(1.08); animation: ss-pan 12s ease-in-out infinite both; }
@keyframes ss-pan {
  0%, 1% { object-position: 0% 50%; transform: scale(1.08) rotate(-.4deg); }
  10% { object-position: 30% 47%; transform: scale(1.08) rotate(.3deg); }
  20% { object-position: 65% 52%; transform: scale(1.08) rotate(-.3deg); }
  31%, 50% { object-position: 100% 49%; transform: scale(1.08) rotate(.2deg); }
  51%, 100% { object-position: 0% 50%; transform: scale(1.08) rotate(-.4deg); }
}
.ss-scrim-top { position: absolute; left: 0; right: 0; top: 0; height: 230px; background: linear-gradient(rgba(6,10,6,.72), rgba(6,10,6,0)); }
.ss-scrim-bot { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; background: linear-gradient(rgba(6,10,6,0), rgba(6,10,6,.82)); }
.ss-rec-bar { position: absolute; top: 62px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; }
.ss-rec-pill { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.ss-rec-pill i { width: 8px; height: 8px; border-radius: 999px; background: #ff5b5b; }
.ss-instr { position: absolute; top: 116px; left: 24px; right: 24px; text-align: center; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.45); }
.ss-instr-h { font-size: 20px; font-weight: 600; }
.ss-instr-s { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 4px; }
.ss-instr-prog { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.ss-instr-track { width: 55%; height: 4px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.ss-instr-track span { display: block; height: 100%; background: #9fe870; border-radius: 999px; }
.ss-instr-pct { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.ss-aim { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.ss-aim svg { width: 60px; height: 60px; }
.ss-cam-bottom { position: absolute; left: 20px; right: 20px; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ss-film { align-self: flex-end; display: flex; gap: 6px; }
.ss-film img { width: 46px; height: 60px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 2px 6px rgba(0,0,0,.3); }
.ss-stop { width: 72px; height: 72px; border-radius: 999px; box-shadow: inset 0 0 0 3px #fff; display: flex; align-items: center; justify-content: center; }
.ss-stop i { width: 30px; height: 30px; border-radius: 7px; background: #c23434; }
/* 2-4: the owner's design (sorting, room grid, report) */
.ss-page { background: #fff; }
.ss-body { position: absolute; left: 22px; right: 22px; top: 92px; }
.ss-title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.3px; color: #111; }
.ss-progress { margin-top: 16px; height: 9px; border-radius: 999px; background: #e9e9ec; overflow: hidden; }
.ss-progress span { display: block; height: 100%; border-radius: 999px; background: #2f7a12; }
.ss-progress-t { margin-top: 10px; font-size: 15px; color: #6e6e73; }
.ss-roomsec { margin-top: 30px; }
.ss-roomsec-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.ss-roomsec-h b { font-size: 17px; font-weight: 700; color: #111; }
.ss-roomsec-h span { flex: 1; font-size: 14px; color: #8a8a8e; }
.ss-roomsec-h em { font-style: normal; font-size: 15px; font-weight: 600; color: #2f6fd6; }
.ss-thumbs { display: grid; gap: 5px; }
.ss-thumb { position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; }
.ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-thumb b { position: absolute; inset: 0; background: rgba(60,48,36,.62); color: #fff; font-size: 21px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ss-sortrow { margin-top: 18px; padding-bottom: 16px; border-bottom: 1px solid #ededf0; }
.ss-sortrow:last-child { border-bottom: 0; }
.ss-sortrow .ss-roomsec-h { margin-bottom: 8px; }
.ss-sortline { display: flex; align-items: center; gap: 14px; }
.ss-sortline .ss-thumbs { width: 62%; gap: 4px; }
.ss-sortline .ss-thumb { border-radius: 6px; aspect-ratio: 1.15; }
.ss-state { margin-left: auto; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; }
.ss-state.is-done { background: #34a853; }
.ss-state.is-busy { background: conic-gradient(#34a853 0 40%, #e3e3e8 40%); -webkit-mask: radial-gradient(circle, transparent 9px, #000 9.5px); mask: radial-gradient(circle, transparent 9px, #000 9.5px); }
.ss-state.is-todo { box-shadow: inset 0 0 0 2px #d6d6db; }
.ss-sortline .ss-chev { color: #8a8a8e; font-size: 16px; }
.ss-gridhead { position: absolute; left: 22px; right: 22px; top: 62px; display: flex; align-items: flex-start; gap: 22px; }
.ss-gridhead > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ss-gridhead b { font-size: 20px; font-weight: 700; }
.ss-gridhead em { font-style: normal; font-size: 14px; color: #8a8a8e; }
.ss-back { font-size: 24px; margin-top: 2px; }
.ss-more { font-size: 14px; letter-spacing: 1px; color: #111; margin-top: 6px; }
.ss-grid2 { position: absolute; left: 0; right: 0; top: 140px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 4px; }
.ss-grid2 img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; display: block; border-radius: 4px; }
/* phone 3: the report open on the phone (page 1 as renderPdf draws it, A4 at 595 × 842 pt) */
.ss-page.is-viewer { background: #e4e4e9; }
.ss-viewer-bar { position: absolute; top: 56px; left: 16px; right: 16px; display: flex; align-items: center; gap: 12px; }
.ss-viewer-bar b { flex: 1; text-align: center; font-size: 17px; font-weight: 600; }
.ss-viewer-share { width: 38px; display: flex; justify-content: center; font-size: 22px; color: #2f7a12; }
.ss-sheet-clip { position: absolute; top: 102px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.ss-sheet { position: absolute; top: 6px; left: 12px; right: 12px; display: flex; flex-direction: column; gap: 10px; }
.ss-a4 { position: relative; zoom: 0.615; width: 595px; height: 842px; flex: none; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); padding: 40px 52px 0; box-sizing: border-box; font-family: "Noto Sans", system-ui, -apple-system, sans-serif; color: #0a1f05; overflow: hidden; }
.ss-doc-band { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: #0a1f05; }
.ss-doc-head { display: flex; align-items: center; gap: 9px; }
.ss-doc-logo { width: 16px; height: 16px; border-radius: 3.8px; background: #9fe870; display: flex; }
.ss-doc-logo svg { width: 16px; height: 16px; }
.ss-doc-word { font-size: 11.5px; font-weight: 700; }
.ss-doc-word span { color: #2f7a12; }
.ss-doc-ref { margin-left: auto; font-size: 9.5px; font-weight: 700; color: #86868b; }
.ss-doc-title { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.ss-doc-title h5 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.2px; }
.ss-doc-pill { height: 18px; padding: 0 9px; border-radius: 999px; box-shadow: inset 0 0 0 .9px #2f7a12; color: #2f7a12; font-size: 8.5px; font-weight: 700; display: flex; align-items: center; letter-spacing: .3px; }
.ss-doc-date { margin-top: 6px; font-size: 9.5px; color: #5f5f66; }
.ss-a4 hr { border: 0; border-top: .6px solid #e7e2d3; margin: 14px 0 16px; }
.ss-doc-ts { background: #f3f1e7; border-radius: 10px; padding: 12px; margin: 10px 0 20px; display: flex; flex-direction: column; gap: 4px; }
.ss-doc-ts b { font-size: 8px; font-weight: 700; color: #2f7a12; letter-spacing: .3px; }
.ss-doc-ts strong { font-size: 10px; font-weight: 700; }
.ss-doc-ts p { margin: 3px 0 0; font-size: 9px; line-height: 11px; color: #5f5f66; }
.ss-doc-sec { display: flex; justify-content: space-between; font-size: 9.5px; font-weight: 700; color: #5f5f66; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 9px; }
.ss-doc-sec em { font-style: normal; text-transform: none; letter-spacing: 0; }
.ss-a4 .is-green { color: #2f7a12; font-weight: 700; font-style: normal; font-size: 9px; }
.ss-doc-kv { display: flex; font-size: 10.5px; line-height: 16px; }
.ss-doc-kv span { width: 135px; color: #5f5f66; flex: none; }
.ss-doc-by { font-size: 10.5px; font-weight: 700; line-height: 16px; }
.ss-doc-grey { font-size: 9.5px; color: #5f5f66; line-height: 14px; }
.ss-doc-cov { display: flex; justify-content: space-between; align-items: baseline; font-size: 10.5px; line-height: 16px; }
.ss-doc-cov b { font-size: 11px; font-weight: 700; color: #2f7a12; }
.ss-doc-cov b.is-ink { font-size: 10.5px; color: #0a1f05; }
.ss-doc-note { margin-top: 4px; font-size: 8.5px; color: #86868b; }
.ss-doc-foot { position: absolute; left: 52px; right: 52px; bottom: 0; height: 42px; border-top: .6px solid #e7e2d3; display: flex; justify-content: space-between; padding-top: 8px; font-size: 7.5px; color: #5f5f66; box-sizing: border-box; }
.ss-a4.is-photos { padding-top: 40px; }
.ss-a4 h6 { margin: 22px 0 6px; font-size: 16px; font-weight: 700; }
.ss-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.ss-doc-cell { display: flex; flex-direction: column; gap: 3px; }
.ss-doc-photo { height: 156px; border-radius: 12px; box-shadow: inset 0 0 0 .9px #e7e2d3; padding: 8px; box-sizing: border-box; display: flex; margin-bottom: 8px; }
.ss-doc-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.ss-doc-cell b { font-size: 10px; font-weight: 700; }
.ss-doc-cell span { font-size: 8.5px; color: #5f5f66; }
.ss-doc-cell .ss-doc-code { font-size: 7.5px; }
.ss-doc-code i { font-style: normal; font-size: 6.5px; font-weight: 700; color: #86868b; margin-right: 4px; }
/* tiles */
.ss-tiles { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ss-tile { display: flex; align-items: flex-start; gap: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 16px 18px; }
.ss-tile-icon { flex: none; width: 50px; height: 50px; border-radius: 13px; background: rgba(159,232,112,.08); border: 1px solid rgba(159,232,112,.28); color: #9fe870; display: flex; align-items: center; justify-content: center; }
.ss-tile-icon svg { width: 26px; height: 26px; }
.ss-tile h3 { margin: 2px 0 0; font-size: 16px; line-height: 1.3; font-weight: 700; color: #fbfbfd; }
.ss-tile p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: #c9d4c1; text-wrap: pretty; }
/* Tiles removed 2026-10-03: the phone sits alone, centred in the card. */
@media (min-width: 1180px) {
  .ss-demo { --ss-s: 0.8; }
}
@media (max-width: 760px) {
  .ss-demo { --ss-s: 0.64; }
}

/* ---- the 12 s loop: scene 1 scan (0-33 %), scene 2 photos captured (33-66 %), scene 3 report (66-100 %) ---- */
@property --ss-pct { syntax: "<integer>"; inherits: true; initial-value: 42; }
@property --ss-n { syntax: "<integer>"; inherits: true; initial-value: 246; }
/* Held at frame 0 until the reader reaches the phone (PlayOnView adds .is-playing), so the
   loop starts at scene 1 instead of wherever it got to while the reader was above it. */
.ss-demo:not(.is-playing), .ss-demo:not(.is-playing) * { animation-play-state: paused !important; }
.ss-scene { opacity: 0; animation: 12s linear infinite both; }
.ss-scene.is-1 { opacity: 1; animation-name: ss-s1; }
.ss-scene.is-2 { animation-name: ss-s2; }
.ss-scene.is-3 { animation-name: ss-s3; }
@keyframes ss-s1 { 0%, 31% { opacity: 1; } 34%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ss-s2 { 0%, 31% { opacity: 0; translate: 24px 0; } 34%, 64% { opacity: 1; translate: none; } 67%, 100% { opacity: 0; } }
@keyframes ss-s3 { 0%, 64% { opacity: 0; translate: 24px 0; } 67%, 97% { opacity: 1; translate: none; } 100% { opacity: 0; } }
.ss-labels li { animation: 12s linear infinite both; }
.ss-labels li .ss-step-n { animation: inherit; animation-name: inherit; }
.ss-labels li.is-1 { animation-name: ss-l1; }
.ss-labels li.is-2 { animation-name: ss-l2; }
.ss-labels li.is-3 { animation-name: ss-l3; }
.ss-labels li.is-1 .ss-step-n { animation-name: ss-n1; }
.ss-labels li.is-2 .ss-step-n { animation-name: ss-n2; }
.ss-labels li.is-3 .ss-step-n { animation-name: ss-n3; }
@keyframes ss-l1 { 0%, 32% { color: #fbfbfd; } 34%, 98% { color: rgba(255,255,255,.45); } 100% { color: #fbfbfd; } }
@keyframes ss-l2 { 0%, 32% { color: rgba(255,255,255,.45); } 34%, 65% { color: #fbfbfd; } 67%, 100% { color: rgba(255,255,255,.45); } }
@keyframes ss-l3 { 0%, 65% { color: rgba(255,255,255,.45); } 67%, 98% { color: #fbfbfd; } 100% { color: rgba(255,255,255,.45); } }
@keyframes ss-n1 { 0%, 32% { background: #9fe870; color: #0a1f05; } 34%, 98% { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); } 100% { background: #9fe870; color: #0a1f05; } }
@keyframes ss-n2 { 0%, 32% { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); } 34%, 65% { background: #9fe870; color: #0a1f05; } 67%, 100% { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); } }
@keyframes ss-n3 { 0%, 65% { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); } 67%, 98% { background: #9fe870; color: #0a1f05; } 100% { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); } }
/* scene 1: progress, aim ring, thumbnails landing in the strip */
.ss-anim-bar { display: block; height: 100%; width: 92%; background: #9fe870; border-radius: 999px; animation: ss-bar 12s linear infinite both; }
@keyframes ss-bar { 0%, 3% { width: 42%; } 30%, 50% { width: 92%; } 51%, 100% { width: 42%; } }
.ss-anim-pct { --ss-pct: 92; animation: ss-pct 12s linear infinite both; }
.ss-anim-pct::after { counter-reset: ss-pct var(--ss-pct); content: counter(ss-pct) "%"; }
@keyframes ss-pct { 0%, 3% { --ss-pct: 42; } 30%, 50% { --ss-pct: 92; } 51%, 100% { --ss-pct: 42; } }
.ss-anim-arc { stroke-dashoffset: 0; animation: ss-arc 12s linear infinite both; }
@keyframes ss-arc {
  0%, 2% { stroke-dashoffset: 176; stroke: rgba(255,255,255,.9); } 13% { stroke-dashoffset: 0; stroke: rgba(255,255,255,.9); }
  14%, 16% { stroke-dashoffset: 0; stroke: #9fe870; } 16.5% { stroke-dashoffset: 176; stroke: rgba(255,255,255,.9); }
  27% { stroke-dashoffset: 0; stroke: rgba(255,255,255,.9); } 28%, 31% { stroke-dashoffset: 0; stroke: #9fe870; } 32%, 100% { stroke-dashoffset: 176; stroke: rgba(255,255,255,.9); }
}
.ss-anim-film { animation: 12s ease-out infinite both; }
.ss-anim-film.f1 { animation-name: ss-f1; }
.ss-anim-film.f2 { animation-name: ss-f2; }
.ss-anim-film.f3 { animation-name: ss-f3; }
.ss-anim-film.f4 { animation-name: ss-f4; }
.ss-anim-film.f5 { animation-name: ss-f5; }
@keyframes ss-f1 { 0%, 5% { opacity: 0; transform: translateY(14px) scale(.8); } 7%, 50% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; } }
@keyframes ss-f2 { 0%, 10% { opacity: 0; transform: translateY(14px) scale(.8); } 12%, 50% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; } }
@keyframes ss-f3 { 0%, 15% { opacity: 0; transform: translateY(14px) scale(.8); } 17%, 50% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; } }
@keyframes ss-f4 { 0%, 20% { opacity: 0; transform: translateY(14px) scale(.8); } 22%, 50% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; } }
@keyframes ss-f5 { 0%, 25% { opacity: 0; transform: translateY(14px) scale(.8); } 27%, 50% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; } }
/* scene 2: counter, bar, photos landing row by row, rooms ticking off */
.ss-anim-sortbar { display: block; height: 100%; width: 100%; border-radius: 999px; background: #2f7a12; animation: ss-sortbar 12s linear infinite both; }
@keyframes ss-sortbar { 0%, 35% { width: 60%; } 62%, 80% { width: 100%; } 81%, 100% { width: 60%; } }
.ss-anim-count { --ss-n: 327; animation: ss-count 12s linear infinite both; }
.ss-anim-count::after { counter-reset: ss-n var(--ss-n); content: counter(ss-n); }
@keyframes ss-count { 0%, 35% { --ss-n: 246; } 62%, 80% { --ss-n: 327; } 81%, 100% { --ss-n: 246; } }
.ss-sortrow .ss-thumb { animation: 12s ease-out infinite both; }
.ss-state { position: relative; box-shadow: inset 0 0 0 2px #d6d6db; }
.ss-state-done { position: absolute; inset: 0; border-radius: 999px; background: #34a853; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; animation: 12s ease-out infinite both; }
.ss-state.is-busy { box-shadow: none; animation: ss-spin 1.1s linear infinite; }
@keyframes ss-spin { to { transform: rotate(360deg); } }
.ss-sortrow.r1 .ss-thumb { animation-name: ss-r1; }
@keyframes ss-r1 { 0%, 35% { opacity: 0; transform: translateY(-10px); } 37%, 80% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; } }
.ss-sortrow.r2 .ss-thumb { animation-name: ss-r2; }
@keyframes ss-r2 { 0%, 38% { opacity: 0; transform: translateY(-10px); } 40%, 80% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; } }
.ss-sortrow.r3 .ss-thumb { animation-name: ss-r3; }
@keyframes ss-r3 { 0%, 41% { opacity: 0; transform: translateY(-10px); } 43%, 80% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; } }
.ss-sortrow.r4 .ss-thumb { animation-name: ss-r4; }
@keyframes ss-r4 { 0%, 44% { opacity: 0; transform: translateY(-10px); } 46%, 80% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; } }
.ss-sortrow.r5 .ss-thumb { animation-name: ss-r5; }
@keyframes ss-r5 { 0%, 47% { opacity: 0; transform: translateY(-10px); } 49%, 80% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; } }
.ss-sortrow.r6 .ss-thumb { animation-name: ss-r6; }
@keyframes ss-r6 { 0%, 50% { opacity: 0; transform: translateY(-10px); } 52%, 80% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; } }
.ss-sortrow.r1 .ss-state-done { animation-name: ss-t1; }
@keyframes ss-t1 { 0%, 40% { opacity: 0; transform: scale(.3); } 41.5%, 80% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; } }
.ss-sortrow.r2 .ss-state-done { animation-name: ss-t2; }
@keyframes ss-t2 { 0%, 44% { opacity: 0; transform: scale(.3); } 45.5%, 80% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; } }
.ss-sortrow.r3 .ss-state-done { animation-name: ss-t3; }
@keyframes ss-t3 { 0%, 48% { opacity: 0; transform: scale(.3); } 49.5%, 80% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; } }
.ss-sortrow.r4 .ss-state-done { animation-name: ss-t4; }
@keyframes ss-t4 { 0%, 52% { opacity: 0; transform: scale(.3); } 53.5%, 80% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; } }
.ss-sortrow.r5 .ss-state-done { animation-name: ss-t5; }
@keyframes ss-t5 { 0%, 56% { opacity: 0; transform: scale(.3); } 57.5%, 80% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; } }
/* scene 3: the report scrolls from the cover into the photo pages */
.ss-anim-sheet { animation: ss-sheet 12s ease-in-out infinite both; }
@keyframes ss-sheet { 0%, 71% { transform: none; } 92%, 100% { transform: translateY(-320px); } }
@media (prefers-reduced-motion: reduce) {
  .ss-cam-img, .ss-scene, .ss-labels li, .ss-labels .ss-step-n, .ss-anim-bar, .ss-anim-pct, .ss-anim-arc, .ss-anim-film, .ss-anim-sortbar, .ss-anim-count, .ss-sortrow .ss-thumb, .ss-state-done, .ss-state.is-busy, .ss-anim-sheet { animation: none; }
  .ss-scene.is-1, .ss-scene.is-2 { opacity: 0; }
  .ss-scene.is-3 { opacity: 1; }
  .ss-labels li.is-3 { color: #fbfbfd; }
  .ss-labels li.is-3 .ss-step-n { background: #9fe870; color: #0a1f05; }
}

.sg-why { background: #f6f6f7; border-radius: 26px; padding: 34px 40px; margin-top: 26px; }
.sg-why p { margin: 0; font-size: 19px; line-height: 1.6; color: #3a3a3c; text-wrap: pretty; }
.sg-why .sg-why-note { margin-top: 18px; font-size: 15px; color: #8e8e93; }
.sg-faq { margin-top: 26px; border-top: 1px solid #e5e5e8; }
.sg-faq details { border-bottom: 1px solid #e5e5e8; }
.sg-faq summary {
  list-style: none; cursor: pointer; padding: 26px 40px 26px 0; font-size: 19px; font-weight: 600; position: relative;
}
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq summary::after { content: "+"; position: absolute; right: 4px; top: 22px; font-size: 26px; font-weight: 400; }
.sg-faq details[open] summary::after { content: "−"; }
.sg-faq details p { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: #3a3a3c; max-width: 64ch; }
.sg-table-wrap { margin-top: 28px; overflow-x: auto; border: 1px solid #e5e5e8; border-radius: 18px; }
.sg-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.sg-table th, .sg-table td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid #e5e5e8; }
.sg-table thead th { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #6e6e73; background: #f6f6f7; }
.sg-table tbody th { font-weight: 600; color: #111; min-width: 180px; }
.sg-table td { color: #3a3a3c; }
.sg-table tbody tr:last-child th, .sg-table tbody tr:last-child td { border-bottom: none; }
.sg-template { margin-top: 28px; border: 1px solid #e5e5e8; border-radius: 18px; overflow: hidden; background: #fff; }
.sg-template-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: #f6f6f7; border-bottom: 1px solid #e5e5e8; }
.sg-copy { font: inherit; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid #0a1f05; background: #fff; color: #0a1f05; cursor: pointer; }
.sg-copy:hover { background: #0a1f05; color: #fff; }
.sg-template-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sg-download { background: #9fe870; border-color: #9fe870; text-decoration: none; display: inline-block; }
.sg-download:hover { background: #0a1f05; border-color: #0a1f05; color: #fff; }
.sg-template-text { margin: 0; padding: 22px 24px; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; line-height: 1.65; color: #111; }
.sg-template-note { margin: 14px 0 0; font-size: 15px; color: #6e6e73; max-width: 64ch; }
@media print { .sg-template-bar { display: none; } .sg-template { border: none; } }
.sg-related { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.sg-related-card {
  display: flex; flex-direction: column; gap: 14px; border: 1px solid #e5e5e8; border-radius: 24px; padding: 28px 30px;
  text-decoration: none; color: #111; background: #fff;
}
.sg-related-card:hover { border-color: #c9d9bd; }
.sg-related-title { font-size: 19px; font-weight: 700; line-height: 1.35; }
.sg-more { margin: 20px 0 0; font-size: 13px; line-height: 1.7; color: #8a8a90; }
.sg-more-label { font-weight: 600; }
.sg-more a { color: #8a8a90; text-decoration: none; }
.sg-more a:hover { color: #2f7a12; text-decoration: underline; }
.sg-final { margin-top: 96px; padding-top: 56px; border-top: 1px solid #e5e5e8; text-align: center; }
.sg-final p { font-size: 19px; line-height: 1.6; color: #6e6e73; margin: 18px auto 30px; max-width: 58ch; }
.sg-final .sg-cta-note { font-size: 15px; margin: 16px auto 0; }
@media (max-width: 700px) {
  .sg { padding-top: 28px; }
  .sg-summary, .sg-why { padding: 28px 24px; border-radius: 22px; }
  .sg-sec, .sg-product { margin-top: 60px; }
  .sg-list li { grid-template-columns: 40px 1fr; gap: 16px; }
  .sg-contrast { grid-template-columns: 1fr; }
  .sg-contrast-col.is-before { border-right: 0; border-bottom: 1px solid #e5e5e8; }
  .sg-product { padding: 36px 24px; border-radius: 24px; }
  .sg-tiles, .sg-related { grid-template-columns: 1fr; }
  .sg-button { font-size: 17px; padding: 18px 28px; }
}

/* --- how BildProof helps: five tiles with a small drawing each --- */
.g-helps-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px;
}
.g-helps-tile {
  border: 1px solid #e7e7ea; border-radius: 20px; background: #fff; padding: 22px 22px 20px;
}
.g-helps-icon {
  width: 64px; height: 64px; border-radius: 18px; background: #f3f9ee; color: #1d1d1f;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.g-helps-icon svg { width: 48px; height: 48px; display: block; }
/* Coverage is the headline: a wide first tile, so five tiles fill 2 + 3. */
.g-helps-tile.is-wide { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 22px; align-content: center; }
.g-helps-tile.is-wide h3 { align-self: end; }
.g-helps-tile.is-wide p { align-self: start; max-width: 46ch; }
.g-helps-tile.is-wide .g-helps-icon { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 0; grid-row: span 2; }
.g-helps-tile.is-wide .g-helps-icon svg { width: 72px; height: 72px; }
.g-helps-tile h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; font-weight: 700; color: #1d1d1f; }
.g-helps-tile p { margin: 0; font-size: 15px; line-height: 1.55; color: #3a3a3c; text-wrap: pretty; }
.g-helps-outro { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: #6e6e73; }
@media (max-width: 900px) { .g-helps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-helps-tile.is-wide { grid-column: span 2; } }
@media (max-width: 560px) { .g-helps-grid { grid-template-columns: 1fr; } .g-helps-tile.is-wide { grid-column: auto; display: block; } .g-helps-tile.is-wide .g-helps-icon { width: 64px; height: 64px; margin-bottom: 14px; } .g-helps-tile.is-wide .g-helps-icon svg { width: 48px; height: 48px; } }

/* --- one ruling: what happened, what decided it, primary source --- */
.g-ruling {
  margin: 20px 0 0; border: 1px solid #e7e7ea; border-radius: 20px;
  background: #fff; padding: 24px 28px;
}
.g-ruling-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 10px; }
.g-ruling-court { font-size: 15px; font-weight: 700; color: #1d1d1f; }
.g-ruling-az { font-size: 13.5px; color: #6e6e73; font-weight: 600; }
.g-ruling-flag {
  font-size: 12px; font-weight: 600; color: #6e6e73; border: 1px solid #e7e7ea;
  border-radius: 999px; padding: 2px 9px;
}
.g-ruling p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #1d1d1f; text-wrap: pretty; }
.g-ruling p + p { margin-top: 12px; }
.g-ruling footer { margin-top: 14px; font-size: 13.5px; color: #6e6e73; font-weight: 600; }
.g-ruling footer a { color: #6e6e73; }

/* --- worked example: rows building to one highlighted result --- */
.g-calc { border: 1px solid #e7e7ea; border-radius: 18px; margin-top: 22px; overflow: hidden; }
.g-calc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 17px 26px; border-bottom: 1px solid #e7e7ea;
}
.g-calc-row span:first-child { font-size: 16.5px; color: #1d1d1f; }
.g-calc-row span:last-child { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
.g-calc-result {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 20px 26px; background: #eef6e8;
}
.g-calc-result span:first-child { font-size: 16.5px; font-weight: 600; color: #2f7a12; }
.g-calc-result span:last-child {
  font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: #2f7a12; white-space: nowrap;
}
.g-note { font-size: 15.5px; line-height: 1.6; color: #6e6e73; margin: 14px 0 0; max-width: 62ch; text-wrap: pretty; }

/* --- comparison of two regimes --- */
.g-compare-wrap { overflow-x: auto; margin-top: 22px; }
.g-compare {
  width: 100%; min-width: 34em; border-collapse: collapse;
  border: 1px solid #e7e7ea; border-radius: 18px; overflow: hidden;
  font-size: 15.5px; background: #fff;
}
.g-compare th {
  text-align: left; background: #f5f5f7; color: #1d1d1f; font-weight: 700;
  padding: 14px 22px; border-bottom: 1px solid #e7e7ea;
}
.g-compare td { padding: 14px 22px; border-top: 1px solid #e7e7ea; vertical-align: top; line-height: 1.6; }
.g-compare td:first-child { font-weight: 600; }

/* --- common mistakes: the misconception as the heading --- */
.g-cases { display: grid; gap: 14px; margin-top: 22px; }
.g-case { border: 1px solid #e7e7ea; border-radius: 16px; padding: 24px 26px; }
.g-case-head { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.g-case p { margin: 8px 0 0; font-size: 16px; line-height: 1.65; color: #6e6e73; text-wrap: pretty; }

/* --- both sides --- */
.g-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.g-col { border: 1px solid #e7e7ea; border-radius: 18px; padding: 26px; }
.g-col ul { margin: 14px 0 0; padding-left: 18px; font-size: 16px; line-height: 1.7; }
.g-col li { margin: 6px 0; }

/* --- FAQ --- */
.g-faq { display: grid; gap: 10px; margin-top: 22px; }
.g-faq details { border: 1px solid #e7e7ea; border-radius: 16px; padding: 18px 24px; background: #fff; }
.g-faq summary {
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: "+"; color: #6e6e73; font-weight: 600; font-size: 19px; line-height: 1; }
.g-faq details[open] summary::after { content: "−"; }
.g-faq details p { margin: 10px 0 0; font-size: 16px; line-height: 1.65; color: #6e6e73; text-wrap: pretty; }

/* --- the folded long form --- */
.g-detail {
  margin-top: 46px; border: 1px solid #e7e7ea; border-radius: 18px;
  padding: 4px 26px; background: #fff;
}
.g-detail > summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
.g-detail > summary::-webkit-details-marker { display: none; }
.g-detail-hint { font-weight: 500; font-size: 14.5px; color: #6e6e73; text-align: right; }
.g-detail > summary::after { content: "+"; color: #6e6e73; font-weight: 600; font-size: 20px; line-height: 1; }
.g-detail[open] > summary::after { content: ", "; }
.g-detail[open] > summary { border-bottom: 1px solid #e7e7ea; }
/* The body's first heading would otherwise push a 46px gap below the summary. */
.g-detail .guide-body > :first-child { margin-top: 22px; }
.g-detail .guide-body { padding-bottom: 12px; }

/* --- sources + the disclaimer that has to sit with them --- */
.g-sources { margin-top: 46px; border-top: 1px solid #e7e7ea; padding-top: 26px; }
.g-sources ul { margin: 14px 0 0; padding-left: 18px; font-size: 15.5px; line-height: 1.8; color: #6e6e73; }
.g-sources a { color: #6e6e73; }
.g-sources a:hover { color: #1d1d1f; }
.g-disclaimer { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: #6e6e73; max-width: 70ch; text-wrap: pretty; }

/* --- sidebar cards --- */
.g-card { border: 1px solid #e7e7ea; border-radius: 18px; padding: 24px 26px; background: #fff; }
.g-links { display: grid; margin-top: 12px; font-size: 15.5px; }
.g-links a { padding: 11px 0; border-bottom: 1px solid #e7e7ea; color: #1d1d1f; text-decoration: none; }
.g-links a:last-child { border-bottom: 0; }
.g-links a:hover { color: #2f7a12; }
.g-card-note { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: #6e6e73; }
.g-card-note a { color: #2f7a12; font-weight: 600; text-decoration: none; }

/* --- the sticky sidebar only earns its keep on a wide screen --- */
@media (max-width: 1040px) {
  .g-shell { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 32px 20px 0; }
  .g-aside { position: static; top: auto; max-height: none; overflow: visible; }
}
@media (max-width: 620px) {
  .g-shell { padding: 24px 20px 0; }
  .g-answer { padding: 28px 24px; border-radius: 14px; }
  .g-h2 { font-size: 24px; }
  .g-cols { grid-template-columns: 1fr; }
  .g-calc-row, .g-calc-result { padding-left: 18px; padding-right: 18px; }
  .g-calc-row span:last-child { font-size: 17px; }
  .g-calc-result span:last-child { font-size: 22px; }
  .g-faq details { padding: 16px 18px; }
  .g-case { padding: 20px 22px; }
  .g-card { padding: 20px 22px; }
}


  nav:has(.hm-burger),nav:has(.hm-burger) *,footer:has(.hm-foot),footer:has(.hm-foot) *{box-sizing:border-box;}
  .bpnavlink{font-size:14.5px;font-weight:600;color:#3a3a3f;text-decoration:none;}
  .bpnavlink:hover{color:#2f7a12;}
  .hm-burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:none;background:transparent;cursor:pointer;padding:0;margin-left:2px;}
  .hm-mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(251,251,253,.98);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 20px 40px rgba(0,0,0,.08);padding:6px 24px 14px;flex-direction:column;}
  .hm-mobile-menu a{padding:13px 4px;font-size:16px;font-weight:600;color:#1d1d1f;text-decoration:none;border-top:1px solid rgba(0,0,0,.06);}
  .bp-region{position:relative;}
  .bp-region>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:#3a3a3f;padding:6px 11px;border-radius:100px;border:1px solid rgba(20,40,10,.12);background:#fff;}
  .bp-region>summary::-webkit-details-marker{display:none;}
  .bp-region>summary::marker{content:"";}
  .bp-region>summary:hover{border-color:rgba(47,122,18,.35);color:#2f7a12;}
  .bp-region[open]>summary{border-color:rgba(47,122,18,.45);color:#2f7a12;}
  .bp-region-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(310px,calc(100vw - 32px));background:#fff;border:1px solid rgba(20,40,10,.10);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.13);padding:16px;z-index:60;text-align:left;}
  .bp-region-h{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#6e6e73;margin:0 0 8px;}
  .bp-region-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;font-size:14px;font-weight:600;color:#1d1d1f;text-decoration:none;}
  a.bp-region-row:hover{background:rgba(159,232,112,.16);color:#2f7a12;}
  /* Mega menu: each top item opens a full-width panel of icon, title and one line (the Truepic pattern). */
  .bp-mega>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:6px 0;}
  .bp-mega>summary::-webkit-details-marker{display:none;}
  .bp-mega>summary::marker{content:"";}
  .bp-mega>summary>svg{transition:transform .18s;}
  .bp-mega[open]>summary{color:#2f7a12;}
  .bp-mega[open]>summary>svg{transform:rotate(180deg);}
  .bp-mega-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid rgba(20,40,10,.06);border-bottom:1px solid rgba(20,40,10,.08);box-shadow:0 28px 48px rgba(0,0,0,.09);z-index:55;}
  .bp-mega-grid{max-width:1180px;margin:0 auto;padding:22px 24px 26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 18px;}
  .bp-mega-grid.bp-mega-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bp-mega-item{display:flex;align-items:flex-start;gap:14px;padding:14px;border-radius:14px;text-decoration:none;}
  .bp-mega-item:hover,.bp-mega-item:focus-visible{background:rgba(159,232,112,.14);}
  .bp-mega-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(159,232,112,.24);}
  .bp-mega-t{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;color:#1d1d1f;}
  .bp-mega-item:hover .bp-mega-t{color:#2f7a12;}
  .bp-mega-s{display:block;margin-top:3px;font-size:13.5px;font-weight:500;line-height:1.4;color:#6e6e73;}
  .hm-mobile-menu{max-height:calc(100vh - 68px);overflow-y:auto;}
  .hm-mobile-h{margin:16px 4px 2px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#6e6e73;}
  .hm-mobile-h:empty{margin:6px 0 0;}
  .hm-mobile-menu .hm-mobile-h+a{border-top:none;}
  /* No room in the top bar once the nav has seven items; the link lives on in the phone menu and the footer. */
  .bp-nav-verify{display:none!important;}
  @media (max-width:1140px){
    .hm-nav-links{display:none!important;}
    .hm-burger{display:inline-flex;}
    .bp-nav-verify{display:none!important;}
    a[data-ph-loc="nav"],a[data-ph-loc="nav_play"]{display:none!important;}
    .hm-mobile-menu.hm-open{display:flex;}
  }
  body:has(.page-langswitch) .bp-region{display:none!important;}
  /* Footer: brand (mission + contact), then Unternehmen · Produkte · Ratgeber · Rechtliches. One column on phones (owner, 2026-10-09). */
  .hm-footer{padding:64px 24px 40px;background:#fff;border-top:1px solid rgba(20,40,10,.08);}
  .hm-foot{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1.35fr 1fr 1fr;gap:40px 36px;grid-auto-flow:dense;}
  .hm-foot-h{margin:0 0 18px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:#6e6e73;}
  .hm-foot-list{display:flex;flex-direction:column;gap:14px;}
  .hm-foot-list a{font-size:14.5px;font-weight:500;line-height:1.35;color:#1d1d1f;text-decoration:none;}
  .hm-foot-list a:hover{color:#2f7a12;}
  .hm-foot-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;}
  @media (max-width:1080px){.hm-foot{grid-template-columns:repeat(4,minmax(0,1fr))!important;}.hm-foot-brand{grid-column:1/-1;}}
  @media (max-width:820px){.hm-foot{grid-template-columns:minmax(0,1fr)!important;gap:32px!important;}.hm-foot-brand{grid-column:auto;}}
  /* QR code beside a download button, desktop only: a phone cannot scan itself (scripts/sync-chrome.mjs QR_JS). */
  .bp-qr{display:none;}
  @media (min-width:900px) and (hover:hover) and (pointer:fine){
    .bp-qr{display:inline-flex;flex-direction:column;align-items:center;gap:5px;width:96px;flex:none;}
    .bp-qr img{display:block;width:84px;height:84px;box-sizing:border-box;padding:5px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(20,40,10,.1),0 1px 2px rgba(10,31,5,.06);}
    .bp-qr-t{font-size:11.5px;line-height:1.25;font-weight:600;color:inherit;opacity:.72;text-align:center;}
    /* Story guides: the pill button is inline in a block, so the code sits on its line, centred on it. */
    .sg-button{vertical-align:middle;}
    .sg-button+.bp-qr{margin-left:22px;vertical-align:middle;}
  }