/* Short conversion pages (offer_pages.py) · public-site tokens v1. Ratios: pine on paper 10.52,
   muted on paper 5.47, green on paper 5.73, cream on pine 11.57, lime on pine 8.85. */
:root{
 --pine:var(--brand-pine,#123f32);--pine-900:#0b2f25;--paper:var(--brand-paper,#f5f2e9);--surface:var(--brand-surface,#fffdf7);
 --cream:#fffdf5;--lime:var(--brand-accent,#c6ed78);--green:var(--brand-green,#236b4b);--muted:var(--brand-muted,#50675b);--olive:#4f762c;
 --line:var(--brand-line,#264b3b28);--font-sans:var(--brand-font,Manrope,Arial,sans-serif);
 --fs-h1:clamp(2.5rem,1.6rem + 3.2vw,4rem);--fs-h2:clamp(1.375rem,1.1rem + .9vw,1.875rem);--fs-lead:clamp(1.1875rem,1.05rem + .5vw,1.375rem);
 --fs-body:clamp(1.0625rem,1rem + .2vw,1.125rem);--fs-small:.9375rem;--fs-label:.8125rem;
 --gutter:16px;--content-max:81rem;--radius-control:6px;--radius-card:8px;--tap-min:48px;--header-h:64px;
}
@media (min-width:600px){:root{--gutter:32px}}
@media (min-width:1024px){:root{--gutter:72px;--header-h:72px}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body.offer-page{margin:0;background:var(--paper);color:var(--pine);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.6;font-weight:450}
:where(.offer-page) :where(h1,h2,p,ol,ul,dl,dd){margin:0}
.offer-page a{color:inherit;text-underline-offset:4px}
.offer-page :focus-visible{outline:3px solid var(--olive);outline-offset:3px}
.offer-page :is(.conversion-header,.legal-footer) :focus-visible{outline-color:var(--lime)}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:20;padding:12px 16px;background:var(--surface);color:var(--pine)}
.skip:focus{top:8px}

/* H-C conversion template: logo and back link, no main navigation */
.conversion-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h);padding-inline:var(--gutter);background:var(--pine);color:var(--cream)}
.offer-page .brand{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;color:inherit;text-decoration:none;font-size:var(--brand-mark-size,28px);letter-spacing:var(--brand-mark-tracking,-1.5px);font-weight:800;line-height:1;white-space:nowrap}
.offer-page .brand small{font-size:var(--fs-label);letter-spacing:.02em;font-weight:600}
.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-small);font-weight:600}
main{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
main:focus{outline:none}
.conversion-hero{padding-block:clamp(1.25rem,.75rem + 1.5vw,2.5rem)}
.conversion-grid{display:grid;gap:clamp(1.5rem,1rem + 2vw,3rem)}
@media (min-width:1024px){.conversion-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:start}}
.eyebrow{font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.conversion-copy h1{margin-block:.5rem 1rem;font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.03em;font-weight:650;text-wrap:balance}
.conversion-copy h1 span{display:block}
.conversion-copy .h-claim{color:var(--green);font-weight:450}
.conversion-copy .lead{max-width:36ch;font-size:var(--fs-lead);line-height:1.5}

/* Form: visible labels, the required field marked, no placeholder-only labels */
.inquiry-form,.inquiry-result{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:clamp(1.25rem,1rem + 1vw,2rem)}
.inquiry-form{container-type:inline-size}
.inquiry-result h2{font-size:var(--fs-h2);line-height:1.25;font-weight:600}
.form-intro{margin-block-end:1rem;color:var(--muted)}
.field{display:grid;align-content:start;gap:.375rem;margin-block-end:1rem}
.field>label{font-weight:600}
.field__req{margin-inline-start:.5rem;font-size:var(--fs-small);font-weight:450;color:var(--muted)}
.field :is(select,input,textarea){width:100%;min-height:var(--tap-min);padding:.5rem .875rem;font:inherit;font-size:var(--fs-body);color:var(--pine);background:var(--surface);border:2px solid var(--muted);border-radius:var(--radius-control)}
.field textarea{min-height:4.5rem;resize:vertical}
@container (min-width:30rem){.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}}
.field__help,.form-notice,.microcopy,.legal-footer{font-size:var(--fs-small);line-height:1.5}
.field__help,.microcopy{color:var(--muted)}
.field__note{font-size:var(--fs-small);font-weight:600;color:var(--green)}
.form-notice{margin-block:1.25rem 1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding-inline:28px;border:2px solid transparent;border-radius:var(--radius-control);font:600 var(--fs-body)/1.2 var(--font-sans);cursor:pointer}
.btn--primary{background:var(--pine);color:var(--cream)}
.btn--primary:hover:not(:disabled){background:var(--pine-900)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.microcopy{margin-block-start:.75rem}
.form-status{margin-block-start:.75rem}
.form-status:empty{display:none}
.result-steps{margin-block:1rem;padding-inline-start:1.5rem;display:grid;gap:.5rem}
@media (max-width:599px){.btn--primary{width:100%;min-height:48px}}

/* Supporting copy: one idea per card, answers visible (no disclosure) */
.conversion-details{padding-block:clamp(2rem,1.5rem + 2vw,3.5rem);border-block-start:1px solid var(--line)}
.details-grid{display:grid;gap:1rem}
@media (min-width:900px){.details-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.details-grid article{background:var(--surface);border-radius:var(--radius-card);padding:1.5rem}
.details-grid h2,.conversion-faq h2{margin-block-end:.75rem;font-size:var(--fs-h2);line-height:1.25;font-weight:600}
.details-grid :is(ol,ul){padding-inline-start:1.25rem;display:grid;gap:.5rem}
/* P-05 entry steps: step, who acts, what happens, each on its own line */
.entry-steps li{display:grid;gap:.125rem}
.details-grid p{margin-block-start:.75rem}
.outcomes,.faq-list{display:grid;gap:1rem}
.outcomes dt,.faq-list dt{font-weight:600}
.outcomes dd,.faq-list dd{color:var(--muted)}
.conversion-faq{padding-block:0 clamp(2rem,1.5rem + 2vw,3.5rem)}
.conversion-faq .faq-list{max-width:66ch}

/* Static legal footer: reachable without JavaScript */
.legal-footer{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2rem;padding:1.5rem var(--gutter);background:var(--pine-900);color:var(--cream)}
.legal-footer nav{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.legal-footer nav a{display:inline-flex;align-items:center;min-height:44px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.conversion-header,.btn,.skip{display:none!important}body.offer-page{background:#fff;color:#000}.legal-footer{background:none;color:#000}}

/* Template H-B (offer, trust and content pages) and the H-C event page: full-width bands, one H1 in two
   spans, one conversation button per viewport. Lime only on pine or green (8.85, 4.82), never on paper. */
:root{--mist:var(--brand-mist,#e3ebdc);--fs-section:clamp(1.75rem,1.3rem + 1.8vw,2.75rem);--fs-h3:clamp(1.1875rem,1.05rem + .5vw,1.375rem)}
.offer-main{max-width:none;padding-inline:0}
.band{padding-block:clamp(2.5rem,1.75rem + 3vw,4.5rem)}
.band>.container{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter);overflow-wrap:break-word}
.band--default{background:var(--paper)}
.band--surface{background:var(--surface)}
.band--hero,.band--closing{background:var(--pine);color:var(--cream)}
.band--accent{background:var(--green);color:var(--cream)}
.band h2{margin-block-end:1.25rem;max-width:28ch;font-size:var(--fs-section);line-height:1.12;letter-spacing:-.02em;font-weight:650;text-wrap:balance}
.band h3{margin-block:1.75rem .5rem;font-size:var(--fs-h3);line-height:1.3;font-weight:600}
.band p,.band li{max-width:66ch}
.band :is(p,ul,ol,.table-wrap)+:is(p,ul,ol,.table-wrap){margin-block-start:.75rem}
.offer-page :is(.offer-header,.offer-footer,.band--hero,.band--closing,.band--accent) :focus-visible{outline-color:var(--lime)}

/* Header with main navigation; below 1024 px the menu link (site_chrome) jumps to the footer navigation */
.offer-header{display:flex;align-items:center;gap:1rem;min-height:var(--header-h);padding-inline:var(--gutter);background:var(--pine);color:var(--cream)}
.offer-nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.5rem;margin-inline-start:auto}
.offer-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-small);font-weight:600;text-decoration:none}
.offer-nav a:hover,.offer-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
@media (max-width:1023px){.offer-nav{display:none}.offer-header .brand small{display:none}}

/* Hero: eyebrow, statement and claim, one sentence, one button, the status line outside the word budget.
   The line height leaves room for „₂“, which the Manrope subset lacks (L2-B09). */
.offer-hero .container{display:grid;justify-items:start;gap:1rem}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem;font-size:var(--fs-small)}
.breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
.band--hero .eyebrow{color:var(--lime)}
.offer-hero h1{max-width:20ch;font-size:var(--fs-h1);line-height:1.16;letter-spacing:-.03em;font-weight:650;text-wrap:balance;hyphens:manual}
.offer-hero h1 span{display:block}
@media (max-width:359px){.offer-hero h1{font-size:2rem}.offer-hero .lead{font-size:var(--fs-body)}}
.band--hero .h-claim{color:var(--lime);font-weight:450}
.band--default .h-claim{color:var(--green);font-weight:450}
.offer-hero .lead{max-width:44ch;font-size:var(--fs-lead);line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem 2rem;margin-block-start:.5rem}
.hero-action{display:grid;justify-items:start;gap:.375rem}
.hero-action .microcopy{margin:0;max-width:34ch}
.status-line{padding-block-start:.75rem;border-block-start:1px solid color-mix(in srgb,currentColor 30%,transparent);font-size:var(--fs-small);line-height:1.5}
.status-line a{display:inline-block;min-height:24px}
.band:is(.band--hero,.band--closing,.band--accent) .microcopy,.band--hero .status-line{color:var(--cream)}
.offer-page a.btn{text-decoration:none}
.offer-page a.btn--primary{color:var(--cream)}
.offer-page :is(.band--hero,.band--closing,.band--accent) a.btn--primary{background:var(--lime);color:var(--pine)}
.offer-page :is(.band--hero,.band--closing,.band--accent) a.btn--primary:hover{background:#d6f59a}
.btn--secondary{background:transparent;color:var(--pine);border-color:var(--pine)}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.hero-secondary{margin-block-start:1rem}

/* Sections: cards, lists, tables, steps, results, limits */
.band-kicker{margin-block:1.5rem .75rem;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.band-kicker:first-of-type{margin-block-start:0}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.card{display:grid;align-content:start;gap:.5rem;padding:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card)}
.card h3,.step h3,.result-card h3{margin:0}
.source{display:block;margin-block-start:.25rem;font-size:var(--fs-small);color:var(--muted)}
.note{color:var(--muted);font-size:var(--fs-small)}
.bullets,.checklist{display:grid;gap:.5rem;padding-inline-start:1.25rem}
.terms{display:grid;gap:.75rem;padding-inline-start:1.25rem}
.checklist{padding-inline-start:1.75rem}
.table-wrap{max-width:100%;overflow-x:auto;margin-block:1rem}
.data-table{width:100%;border-collapse:collapse;background:var(--surface);font-size:var(--fs-small);line-height:1.5}
.data-table caption{padding-block-end:.5rem;text-align:left;font-size:var(--fs-body);font-weight:600}
.data-table caption .source{font-weight:450}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.data-table :is(th,td){padding:.625rem .75rem;text-align:left;vertical-align:top;border-block-end:1px solid var(--line)}
.data-table thead th{background:var(--mist);font-weight:600}
.data-table td a{display:inline-block;min-height:24px;padding-block:.125rem;font-weight:600}
.data-table--bands{max-width:44rem}
.data-table--template{min-width:48rem}
.data-table--template :is(th,td){height:2.75rem;border:1px solid var(--line)}
@media (min-width:600px){.data-table--status{table-layout:fixed}.data-table--status :is(th,td):nth-child(1){width:46%}.data-table--status :is(th,td):nth-child(2){width:18%}}
@media (max-width:599px){
 .data-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .data-table--stack tr{display:block;padding-block:.5rem;border-block-end:1px solid var(--line)}
 .data-table--stack td{display:block;padding:.25rem .75rem;border:0}
 .data-table--stack td::before{content:attr(data-label);display:block;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted)}
}
.steps{display:grid;gap:1rem;margin:0 0 1.5rem;padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.step{display:grid;align-content:start;gap:.375rem;padding:1.25rem 1.5rem;background:var(--paper);border-block-start:3px solid var(--green);border-radius:var(--radius-card)}
.band--default .step{background:var(--surface)}
.step__num{font-size:var(--fs-h3);font-weight:650;color:var(--green)}
.step__actor{font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.result-grid{display:grid;gap:1rem}
@media (min-width:900px){.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.result-card{display:grid;align-content:start;gap:1rem;padding:1.5rem;background:var(--surface);color:var(--pine);border-radius:var(--radius-card)}
.result-groups{display:grid;gap:1rem}
.result-groups dt{font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--green)}
.band .faq-list{max-width:72ch}
.faq-list>div,.band--closing .container>*{min-width:0;overflow-wrap:anywhere}
.stand{display:grid;grid-template-columns:minmax(0,1fr);gap:.25rem;padding:1.5rem;background:var(--mist);border-radius:var(--radius-card)}
.stand h3{margin-block:1rem .25rem}
.sources{display:grid;padding-inline-start:1.25rem}
.sources a{display:inline-flex;align-items:center;min-height:44px}
.related-links{display:flex;flex-wrap:wrap;gap:0 2rem}
.band--closing .container{display:grid;justify-items:start;gap:1rem}
.band--closing h2{margin:0}

/* Footer: site navigation (the menu link's target) and the static legal block */
.offer-footer{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2rem;padding:1.5rem var(--gutter);background:var(--pine-900);color:var(--cream)}
.offer-footer>nav{display:flex;flex-wrap:wrap;gap:0 1.5rem}
.offer-footer>nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-small);font-weight:600}

/* Print: the Prüfliste with its legal basis, Stand and sources; no navigation or buttons */
@media print{
 .offer-header,.offer-footer>nav,.offer-footer>.brand,.hero-actions,.breadcrumb,[data-related],.band--closing,.print-action{display:none!important}
 .offer-main .band{padding-block:.5rem;background:none!important;color:#000!important}
 .offer-main .band :is(h1,h2,h3,p,li,td,th,dt,dd,span,a,caption){color:#000!important}
 .card,.step,.result-card,.stand,.data-table{background:none!important;border-color:#000!important}
 .table-wrap{overflow:visible}
 .data-table--template{min-width:0}
 .sources a::after{content:" " attr(href);font-size:.8em}
}