/* Shared phone typography. Loaded after the component styles on every page.
   Font overrides keep legacy 6–12 px component rules from shrinking copy again. */
.header-cta-short{display:none}

@media(max-width:820px){
  :root{
    --mobile-copy:17px;
    --mobile-ui:16px;
    --mobile-note:14px;
    --muted:#536176;
    --gutter:20px;
  }
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:var(--mobile-copy);line-height:1.65}
  main,footer,dialog{overflow-wrap:break-word}

  /* Reading text, including the opened FAQs and service/legal dialogs. */
  :where(main,footer,dialog) :is(p,li,dt,dd){
    font-size:var(--mobile-copy)!important;
    line-height:1.65!important;
  }
  :where(main,footer,dialog) :is(p,li,dd) :is(a,span,strong,small){
    font-size:inherit!important;
    line-height:inherit;
  }
  .body-lead,.detail-lead{font-size:20px!important;line-height:1.55!important}
  :is(button,input,textarea,select),.button,.text-link,.text-button,
  :where(main,dialog) :is(label,summary),.field-label{
    font-size:var(--mobile-ui)!important;
    line-height:1.5;
  }
  button,.button{min-height:44px}
  .button{white-space:normal;padding:15px 20px;gap:12px;max-width:100%}
  .button>.icon{flex:none;width:20px;height:20px}
  .text-link,.text-button{line-height:1.5;gap:10px}
  .eyebrow,.partner-kicker,.model-label,.aa-panel-label,
  .product-copy h1>.h1-category,.aa-hero h1>.aa-h1-category{
    font-size:14px!important;
    line-height:1.6;
    letter-spacing:.07em;
  }
  h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
  .service-body h3,.product-features h3,.limit-grid h3,
  .choice-copy h2{font-size:24px!important;line-height:1.2;white-space:normal}

  /* A short, full-size header action leaves room for the logo and menu. */
  .header-cta-full{display:none}
  .header-cta-short{display:inline}
  .header-inner{height:auto;min-height:82px;gap:10px;padding-block:10px}
  .header-actions{gap:8px;min-width:0}
  .header-actions .button-small{padding:11px 12px;gap:8px;min-height:46px}
  .header-actions .button-small>.icon{width:18px;height:18px}
  .menu-toggle{width:44px;height:44px;min-width:44px;flex:none}
  .site-header .brand{flex:none}
  .site-header .brand img{width:96px;height:49px}
  .site-header .brand-caption{font-size:6px}
  .mobile-nav a{font-size:18px;line-height:1.5;padding-block:14px}
  .mobile-contact{gap:8px;padding-inline:16px}
  .mobile-contact>a{font-size:16px!important;min-height:50px;gap:8px}
  .mobile-contact>a+a{flex:1.45}
  .mobile-contact .icon{width:19px;height:19px}

  /* Small supporting copy remains readable and has stronger contrast. */
  .caption-note,.form-privacy,.required-note,.fact-note,
  .sources-section p.asset-note,.aa-partner-note,.aa-video-consent,
  .aa-video-footnote,.aa-diagram-note,.product-location,.overview-local,
  .metric-source,.source-link,.breadcrumbs,.image-credit,
  .hero-footnote,.hero-floating div>span,.glass-tag,.photo-badge,
  .about-photo figcaption,.instagram-profile div>span,
  .instagram-preview-footer,.person div>span,.contact-person div>span,
  .footer-bottom,.footer-top>p>span,.check-controls,.question-number,
  .compare-label,.illustration-label,.time-badge,.button-time,
  .aa-local,.aa-hero-visual>figcaption,.aa-hero-badge div>span,
  .aa-video-number,.aa-annual-summary{
    font-size:var(--mobile-note)!important;
    line-height:1.6!important;
    letter-spacing:0;
  }
  .caption-note,.form-privacy,.required-note,.fact-note,
  .sources-section p.asset-note,.footer-bottom,.footer-top>p>span,
  .person div>span,.product-location,
  .overview-local,.metric-source,.aa-partner-note,.aa-local,
  .aa-video-consent,.aa-video-footnote{color:#536176!important}
  .person strong,.contact-person strong,.hero-floating strong,
  .instagram-profile strong,.aa-hero-badge strong{
    font-size:16px!important;line-height:1.5;
  }
  .person-monogram{font-size:16px}
  .hero-floating{gap:13px;padding:18px;bottom:35px}
  .hero-floating>div{min-width:0}
  .hero-visual{min-height:430px}
  .image-credit{bottom:8px}
  .promise-bar{display:grid;grid-template-columns:1fr;gap:16px;padding:22px 0;font-size:16px}
  .promise-bar>span{gap:12px}
  .services-note{display:block;font-size:15px;line-height:1.6}
  .services-note a{font-size:16px;margin-top:12px}
  .card-footer{font-size:14px;line-height:1.5;gap:12px}
  .service-body{padding:24px}
  .service-body p{margin-bottom:22px}
  .service-number{font-size:13px;width:30px;height:30px}
  .principle-letter>span{font-size:13px;line-height:1.6;letter-spacing:.05em}
  .project-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .project-tabs button{min-width:0;padding:12px 8px;white-space:normal}
  .photo-badge{white-space:normal;max-width:calc(100% - 32px);padding:7px 10px}
  .mini-photo-label{font-size:18px;line-height:1.4;max-width:none}
  .inspiration-main>div>span{font-size:16px}
  .instagram-preview-footer{align-items:flex-start;flex-wrap:wrap;gap:14px}

  .faq-list summary,.detail-faq summary{
    font-size:18px!important;line-height:1.5;padding-block:22px;gap:18px;
  }
  .faq-list summary .icon,.detail-faq summary .icon{width:22px;height:22px;flex:none}
  .faq-list details>p,.detail-faq p{padding-right:0;padding-bottom:25px}
  .contact-mail{font-size:17px;overflow-wrap:anywhere}
  .contact-address{font-size:17px}
  .contact-address span{font-size:inherit}
  .contact-form{padding:26px 20px}
  .contact-form>label,.form-row>label{font-size:16px;line-height:1.5;gap:9px}
  .contact-form input:not([type=radio]),.contact-form textarea{
    font-size:17px!important;line-height:1.6;min-height:50px;padding:12px;
  }
  .contact-form input::placeholder,.contact-form textarea::placeholder{font-size:16px}
  .contact-form textarea{min-height:190px}
  .topic-chips{gap:9px}
  .topic-chips span{font-size:16px;padding:11px 14px;line-height:1.4;min-height:44px}
  .form-privacy .inline-link{font-size:inherit!important;text-align:left;min-height:0}
  .required-note{display:block;margin-top:18px}
  .check-controls{flex-wrap:wrap;align-items:flex-start;gap:15px}
  .check-controls>span{max-width:100%;margin-left:0}
  .check-summary>div{font-size:16px;line-height:1.6;gap:14px}
  .system-table,.system-table th,.system-table tbody th,.system-table td,
  .overview-table th,.overview-table td{font-size:16px!important;line-height:1.6}

  /* The footer in the supplied screenshots no longer relies on tiny labels. */
  .footer-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 18px}
  .footer-top>.brand{grid-column:1;grid-row:1}
  .footer-top>.brand img{width:120px;height:61px}
  .footer-top>.brand .brand-caption{font-size:7px}
  .footer-top>.footer-instagram{grid-column:2;grid-row:1;width:46px;height:46px}
  .footer-top>p{grid-column:1/-1;margin:0}
  .footer-top>p>span{max-width:none;margin-top:7px}
  .footer-links{display:flex;flex-direction:column;gap:20px;padding-block:27px;font-size:16px}
  .footer-links>div,.footer-links>div+div{max-width:none;justify-content:flex-start;gap:12px 24px}
  .footer-links a,.footer-links button{display:inline-flex;align-items:center;min-height:44px;font-size:16px}
  .footer-bottom{gap:14px;padding-top:24px}
  .footer-bottom>span{overflow-wrap:anywhere}
  footer{padding-bottom:calc(115px + env(safe-area-inset-bottom))}

  /* Manufacturer information, sources and simulation inputs. */
  .product-metrics{grid-template-columns:1fr;padding-block:0}
  .product-metrics>article,.product-metrics>article:first-child,.product-metrics>article:last-child{
    display:grid;grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr);
    align-items:center;gap:20px;padding:22px 0;border-right:0;border-bottom:1px solid var(--line);
  }
  .product-metrics>article:last-child{border-bottom:0}
  .product-metrics strong{font-size:34px;line-height:1.2}
  .product-metrics strong>em{font-size:16px;display:block;margin:5px 0 0}
  .product-metrics article>span{font-size:16px;line-height:1.65;margin-top:0;color:#536176}
  .metric-source{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .source-link{font-size:16px!important;line-height:1.6}
  .product-showcase figcaption{gap:16px;flex-wrap:wrap}
  .product-showcase figcaption>span,.product-showcase figcaption>div>span,
  .partner-product-logo>span:last-child{font-size:14px;line-height:1.6;letter-spacing:0}
  .product-showcase figcaption>div>strong{font-size:22px}
  .sim-kpis{grid-template-columns:1fr;gap:12px}
  .sim-kpis>div{padding:22px;border-radius:15px}
  .sim-kpis>div>span{font-size:16px;line-height:1.5;min-height:0;color:#536176}
  .sim-kpis strong{font-size:36px;line-height:1.3;margin:8px 0 5px;white-space:normal}
  .sim-kpis strong>em{font-size:22px}
  .sim-kpis small{font-size:14px;line-height:1.6;color:#536176}
  .sim-kpis .combi-amount{font-size:27px;line-height:1.5}
  .annual-detail{flex-direction:column;gap:6px;font-size:14px;color:#536176}
  .sim-panel,.aa-annual-panel{padding:25px 20px}
  .sim-panel-heading{align-items:flex-start;gap:16px;flex-wrap:wrap}
  .sim-panel-heading>span,.sim-panel-heading button{font-size:14px;line-height:1.6}
  .sim-control{margin-block:24px}
  .sim-control>label{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .sim-control label>span{font-size:16px;gap:9px;white-space:normal}
  .sim-control label>span>span{font-size:16px!important}
  .sim-control input[type=number],.sim-assumptions .sim-control input[type=number],
  .aa-annual-panel .sim-control input[type=number]{font-size:20px!important;width:120px;padding:10px;min-height:48px}
  .sim-control>input[type=range]{margin-top:20px}
  .solar-toggle-row{gap:18px;align-items:center}
  .solar-toggle-row strong,.aa-toggle-row strong{font-size:17px;line-height:1.5}
  .solar-toggle-row div>span,.aa-toggle-row div>span{font-size:15px;line-height:1.6;color:#536176}
  .solar-switch,.aa-toggle-row .solar-switch{width:50px;height:30px;min-height:30px;flex:none}
  .solar-switch>span,.aa-toggle-row .solar-switch>span{width:24px;height:24px}
  .solar-switch[aria-checked=true]>span,.aa-toggle-row .solar-switch[aria-checked=true]>span{transform:translateX(20px)}
  .balance-legend>span,.aa-balance-legend{font-size:15px;line-height:1.6}
  .balance-legend,.aa-balance-legend{gap:12px 18px}
  .product-facts>div{display:block;padding-block:22px}
  .product-facts dt{font-weight:550;margin-bottom:8px;color:#536176}
  .product-facts dd{margin:0;color:#32455e}
  .local-service strong{font-size:18px;line-height:1.4}
  .sources-section{padding:28px 20px}
  .sources-section ol{display:block;padding-left:24px;margin-block:24px;color:#536176}
  .sources-section li{padding-left:5px;margin-bottom:22px;line-height:1.65}
  .sources-section li>a{font-size:17px;line-height:1.65;overflow-wrap:anywhere;color:#284f82}
  .sources-section li .icon{width:17px;height:17px;margin-left:6px}
  .related-heating>div{grid-template-columns:minmax(0,1fr);gap:13px}
  .related-heating>div>a{padding:24px;min-height:95px}
  .related-heating a>span{font-size:14px;line-height:1.5;color:#536176}
  .related-heating a>strong{font-size:19px;line-height:1.5;overflow-wrap:anywhere}
  .heating-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
  .heating-filters>button{padding:12px 8px;white-space:normal}
  .choice-copy>.eyebrow,.choice-image>span{font-size:14px}
  .choice-cta,.partner-feature-cta{font-size:16px;line-height:1.5;gap:12px}
  .choice-cta .icon{flex:none}
  .portfolio-links span,.home-partner-feature figure>span{font-size:14px;line-height:1.6;letter-spacing:0}
  .portfolio-links strong{font-size:21px;line-height:1.4}
  .home-biomass-products span{font-size:16px;line-height:1.55;hyphens:auto;overflow-wrap:anywhere}

  /* Readable explanations and controls around the schematic drawings. */
  .cutaway-top>span,.aa-stage-top>span,.aa-scene-key{font-size:13px;line-height:1.6;letter-spacing:0}
  .cutaway-top,.aa-stage-top{gap:12px;align-items:flex-start}
  .motion-button,.aa-motion{min-height:44px;min-width:44px;flex:none}
  .cutaway-legend>span,.cutaway-navigation>p,.aa-legend{font-size:14px;line-height:1.6}
  .cutaway-navigation>p{color:#b9cde3}
  .component-chip{padding:13px 10px;gap:9px;min-height:74px}
  .component-chip>.component-number{width:28px;height:28px;font-size:14px}
  .component-chip>strong{font-size:16px;line-height:1.5;overflow-wrap:anywhere;hyphens:auto}
  .component-chip small{font-size:13px;line-height:1.6;letter-spacing:0;color:#b3c9e1}
  .cutaway-stage .diagram-info,.aa-explanation{min-height:0;padding:20px 17px}
  .cutaway-stage .diagram-info>span,.aa-explanation strong{font-size:13px;line-height:1.6;letter-spacing:.025em;color:#b4cce6}
  .cutaway-stage .diagram-info p,.aa-explanation p{font-size:17px!important;line-height:1.7!important;color:#d3dfef}
  .cutaway-footnote>p,.cutaway-footnote>a,.cutaway-footnote>span{font-size:14px;line-height:1.6;color:#b8cbe0}
  .cutaway-footnote{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
  .aa-component-chips button{font-size:16px;min-height:48px;padding:12px}
  .aa-component-chips button>.aa-component-number{font-size:14px;opacity:.8}
  .aa-setting-label{font-size:16px;line-height:1.5}
  .aa-segmented button{white-space:normal;padding:12px 7px;gap:7px;min-width:0}
  .aa-segmented .icon{width:18px;height:18px}
  .aa-comfort-note{font-size:17px;line-height:1.65}
  .aa-comfort-note>strong{font-size:18px;line-height:1.5;margin-bottom:12px}
  .aa-comfort-note>span{font-size:inherit}
  .aa-intro-strip>span{font-size:14px;align-items:flex-start}
  .aa-intro-strip strong{font-size:16px;line-height:1.5}
  .aa-mode-label{font-size:13px;letter-spacing:.025em}
  .aa-scene-key{flex-wrap:wrap}
  .aa-diagram-note{color:#b4c5dc}
  .aa-hero-badge{padding:18px}
  .aa-video-actions{font-size:16px;line-height:1.5;gap:18px}
  .aa-video-actions a{font-size:16px;min-height:44px}
  .aa-video-copy h3{font-size:25px;line-height:1.25}
  .aa-video-load{font-size:16px;padding:14px 20px;min-height:48px}
  .aa-video-load>span{font-size:16px}
  .aa-local-contact>p{text-align:left}
}

@media(max-width:600px){
  .service-grid,.heating-choice-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .service-photo{aspect-ratio:1.8}
  .inspiration-side{grid-template-columns:1fr;height:auto;gap:18px}
  .inspiration-side>button{height:260px;min-height:260px}
  .inspiration-side .photo-badge{font-size:14px}
  .mini-photo-label{bottom:22px;left:22px;right:22px}
  .hero .button-row>.button,.check-banner .button,.aa-hero .button{width:100%}
  .aa-hero .button-row{gap:20px}
}

@media(max-width:360px){
  .component-chips{grid-template-columns:1fr}
  .component-chip{padding:15px;min-height:76px}
  .aa-options,.aa-annual-panel{padding-inline:18px}
}
/* Zwischen 681 und 820 px steht der Umschalter noch neben der Ueberschrift. Mit voller Breite ragte er dort
   107 px ueber den Rand (schon im Ausgangsstand). Volle Breite gilt erst, wenn die Ueberschrift darueber steht. */
@media (min-width:681px) and (max-width:820px){
  .project-tabs{display:flex;width:auto}
  .project-tabs button{white-space:nowrap;padding:10px 14px}
}