/* Component classes for the Neues Heim primitives. Every value here is taken from the
   source layouts (coded website elements + Datenblatt sheets). Square corners throughout. */

/* ── Button ───────────────────────────────────────────── */
.nh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--nh-space-2);height:var(--nh-control-h-sm);padding:0 var(--nh-space-3);border:0;border-radius:var(--nh-radius-none);font-family:var(--nh-font-brand);font-weight:var(--nh-weight-bold);font-size:var(--nh-size-body-sm);line-height:1;text-align:center;text-decoration:none;cursor:pointer;transition:background var(--nh-duration) var(--nh-ease),color var(--nh-duration) var(--nh-ease),border-color var(--nh-duration) var(--nh-ease)}
.nh-btn:hover{text-decoration:none}
.nh-btn--md{height:var(--nh-control-h);padding:0 var(--nh-space-5)}
.nh-btn--lg{height:48px;padding:0 var(--nh-space-6);font-size:var(--nh-size-h4)}
.nh-btn--block{width:100%}
.nh-btn--solid{background:var(--nh-accent);color:var(--nh-white)}
.nh-btn--solid:hover{background:var(--nh-accent-hover);color:var(--nh-white)}
.nh-btn--light{background:var(--nh-white);color:var(--nh-accent)}
.nh-btn--light:hover{background:var(--nh-seasalt);color:var(--nh-accent-hover)}
.nh-btn--dark{background:var(--nh-davys-gray);color:var(--nh-white)}
.nh-btn--dark:hover{background:var(--nh-ink);color:var(--nh-white)}
.nh-btn--outline{background:transparent;color:var(--nh-white);border:1px solid rgba(255,255,255,0.9);text-transform:uppercase;letter-spacing:var(--nh-tracking-wide)}
.nh-btn--outline:hover{background:rgba(255,255,255,0.14);color:var(--nh-white)}
.nh-btn--link{height:auto;padding:0;background:none;color:var(--nh-accent);font-family:var(--nh-font-ui);font-weight:var(--nh-weight-heavy)}
.nh-btn--link:hover{color:var(--nh-accent-hover);text-decoration:underline}
.nh-btn[disabled],.nh-btn--disabled{background:var(--nh-taupe-50);color:var(--nh-white);cursor:not-allowed;pointer-events:none;border-color:transparent}

/* ── Logo ─────────────────────────────────────────────── */
.nh-logo{display:inline-block}
.nh-logo img{height:100%;width:auto}
.nh-logo--wordmark{font-family:var(--nh-font-brand);font-weight:var(--nh-weight-bold);color:var(--nh-ink);line-height:1}

/* ── Icon / IconBadge ─────────────────────────────────── */
.nh-icon{display:inline-block;flex:none}
.nh-icon img{width:100%;height:100%;display:block}
.nh-icon-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--nh-radius-pill);flex:none;transition:transform var(--nh-duration) var(--nh-ease)}
.nh-icon-badge--label{display:inline-flex;flex-direction:column;align-items:center;gap:var(--nh-space-3);text-align:center}
.nh-icon-badge__label{font-family:var(--nh-font-brand);font-weight:var(--nh-weight-bold);font-size:var(--nh-size-body-sm);color:var(--nh-text-body)}
a.nh-icon-badge--label:hover .nh-icon-badge{transform:translateY(-2px)}
a.nh-icon-badge--label:hover .nh-icon-badge__label{color:var(--nh-accent)}

/* ── SectionHeading ───────────────────────────────────── */
.nh-heading{display:flex;flex-direction:column;gap:var(--nh-space-2)}
.nh-heading__rule{width:var(--nh-rule-w);height:var(--nh-rule-h);background:var(--nh-accent)}
.nh-heading__title{font-family:var(--nh-font-brand);font-weight:var(--nh-weight-bold);font-size:var(--nh-size-h2);line-height:var(--nh-leading-tight);color:var(--nh-text-heading);margin:0}
.nh-heading__lead{max-width:var(--nh-content-narrow);margin:var(--nh-space-2) 0 0;font-family:var(--nh-font-ui);font-size:var(--nh-size-body-sm);color:var(--nh-text-body)}
.nh-heading--on-dark .nh-heading__title,.nh-heading--on-dark .nh-heading__lead{color:var(--nh-white)}
.nh-heading--on-dark .nh-heading__rule{background:var(--nh-white)}
.nh-heading--accent .nh-heading__title{color:var(--nh-accent)}
.nh-heading--center{align-items:center;text-align:center}

/* ── Fields ───────────────────────────────────────────── */
.nh-field{display:flex;flex-direction:column;gap:var(--nh-space-2)}
.nh-field__label{font-family:var(--nh-font-ui);font-weight:var(--nh-weight-heavy);font-size:var(--nh-size-label);color:var(--nh-accent);line-height:1}
.nh-field__control,.nh-select__control{display:flex;align-items:center;width:100%;height:var(--nh-control-h);padding:0 var(--nh-control-pad-x);background:var(--nh-white);border:var(--nh-border-thin);border-radius:var(--nh-radius-none);font-family:var(--nh-font-ui);font-size:var(--nh-size-body-sm);color:var(--nh-text-body);outline:none;transition:border-color var(--nh-duration) var(--nh-ease)}
.nh-field__control::placeholder{color:var(--nh-text-muted)}
.nh-field__control:focus,.nh-select__control:focus-visible{border-color:var(--nh-accent)}
.nh-field__control--filled{background:var(--nh-line-light)}
.nh-field__control--area{height:auto;min-height:96px;padding:var(--nh-space-3) var(--nh-control-pad-x);resize:vertical}
.nh-field__hint{font-size:var(--nh-size-caption);color:var(--nh-text-muted)}
.nh-field--error .nh-field__control{border-color:var(--nh-accent)}

/* ── Select ───────────────────────────────────────────── */
.nh-select{position:relative;display:flex;flex-direction:column;gap:var(--nh-space-2)}
.nh-select__control{justify-content:space-between;background:var(--nh-line-light);cursor:pointer;text-align:left}
.nh-select__value{color:var(--nh-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-select__value--selected{color:var(--nh-text-body)}
.nh-select__chevron{width:10px;height:6px;flex:none;margin-left:var(--nh-space-3);transition:transform var(--nh-duration) var(--nh-ease)}
.nh-select__chevron path{stroke:var(--nh-taupe-gray);stroke-width:1.4;fill:none}
.nh-select--open .nh-select__chevron{transform:rotate(180deg)}
.nh-select__list{position:absolute;top:100%;left:0;right:0;z-index:20;max-height:260px;overflow:auto;margin:0;padding:0;list-style:none;background:var(--nh-panel-alt);border:var(--nh-border-thin);border-top:0}
.nh-select__option{padding:11px var(--nh-space-5);font-family:var(--nh-font-ui);font-size:var(--nh-size-body-sm);color:var(--nh-text-body);border-bottom:var(--nh-border-hairline);cursor:pointer}
.nh-select__option:last-child{border-bottom:0}
.nh-select__option:hover{color:var(--nh-accent)}
.nh-select__option--selected{font-weight:var(--nh-weight-bold);color:var(--nh-accent)}

/* ── Checkbox ─────────────────────────────────────────── */
.nh-check{display:flex;align-items:flex-start;gap:var(--nh-space-2);font-family:var(--nh-font-ui);font-size:var(--nh-size-body-sm);color:var(--nh-text-body);cursor:pointer}
.nh-check input{appearance:none;-webkit-appearance:none;width:13px;height:13px;margin:2px 0 0;flex:none;background:var(--nh-white);border:var(--nh-border-thin);border-radius:0;cursor:pointer}
.nh-check input:checked{background:var(--nh-accent);border-color:var(--nh-accent)}
.nh-check input:focus-visible{outline:2px solid var(--nh-accent);outline-offset:1px}

/* ── SearchField ──────────────────────────────────────── */
.nh-search{display:flex;align-items:stretch;width:100%}
.nh-search__input{flex:1;min-width:0;height:var(--nh-control-h);padding:0 var(--nh-control-pad-x);background:var(--nh-white);border:var(--nh-border-thin);border-right:0;font-family:var(--nh-font-ui);font-size:var(--nh-size-body-sm);color:var(--nh-text-body);outline:none}
.nh-search__input::placeholder{color:var(--nh-text-muted)}
.nh-search__input:focus{border-color:var(--nh-accent)}
.nh-search__button{width:var(--nh-control-h);height:var(--nh-control-h);flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--nh-accent);border:0;cursor:pointer;transition:background var(--nh-duration) var(--nh-ease)}
.nh-search__button:hover{background:var(--nh-accent-hover)}
.nh-search__button img{width:15px;height:15px}

/* ── TeaserTile ───────────────────────────────────────── */
.nh-teaser{position:relative;display:block;overflow:hidden;background:var(--nh-taupe-20);text-decoration:none}
.nh-teaser__img{width:100%;height:100%;object-fit:cover;transition:transform var(--nh-duration-slow) var(--nh-ease)}
.nh-teaser:hover .nh-teaser__img{transform:scale(1.03)}
.nh-teaser__band{position:absolute;left:0;right:0;bottom:0;background:var(--nh-accent);padding:8px 14px;font-family:var(--nh-font-brand);font-weight:var(--nh-weight-bold);font-size:var(--nh-size-body-sm);color:var(--nh-white);clip-path:polygon(0 22%,100% 0,100% 100%,0 100%)}
.nh-teaser__band--flat{clip-path:none}

/* ── NewsCard ─────────────────────────────────────────── */
.nh-news{display:flex;flex-direction:column;background:var(--nh-white);text-decoration:none}
.nh-news__img{width:100%;aspect-ratio:16/10;object-fit:cover}
.nh-news__body{display:flex;flex-direction:column;gap:var(--nh-space-3);padding:var(--nh-space-5) var(--nh-space-4) var(--nh-space-6);border-left:var(--nh-border-subtle);border-right:var(--nh-border-subtle);border-bottom:var(--nh-border-subtle)}
.nh-news__title{font-family:var(--nh-font-ui);font-weight:var(--nh-weight-bold);font-size:var(--nh-size-body);color:var(--nh-accent);margin:0;line-height:var(--nh-leading-snug)}
.nh-news__text{font-family:var(--nh-font-ui);font-size:var(--nh-size-body-sm);color:var(--nh-text-body);margin:0}
.nh-news__meta{font-family:var(--nh-font-ui);font-size:var(--nh-size-caption);color:var(--nh-text-muted)}
a.nh-news:hover .nh-news__title{color:var(--nh-accent-hover)}

/* ── QuickLink (Direkteinstieg) ───────────────────────── */
.nh-quicklink{display:inline-flex;flex-direction:column;align-items:center;gap:var(--nh-space-3);text-decoration:none;color:var(--nh-text-body)}
.nh-quicklink__circle{width:56px;height:56px;border-radius:var(--nh-radius-pill);background:var(--nh-accent);display:inline-flex;align-items:center;justify-content:center;transition:background var(--nh-duration) var(--nh-ease),transform var(--nh-duration) var(--nh-ease)}
.nh-quicklink__circle img{width:26px;height:26px}
.nh-quicklink__label{font-family:var(--nh-font-brand);font-weight:var(--nh-weight-bold);font-size:var(--nh-size-body-sm);color:var(--nh-text-body)}
.nh-quicklink:hover .nh-quicklink__circle{background:var(--nh-accent-hover);transform:translateY(-2px)}
.nh-quicklink:hover .nh-quicklink__label{color:var(--nh-accent)}

/* ── InfoTile (myHeim Vorteile grid) ──────────────────── */
.nh-infotile{display:flex;flex-direction:column;justify-content:space-between;gap:var(--nh-space-6);min-height:112px;padding:var(--nh-space-4);background:var(--nh-dim-100);color:var(--nh-white);text-decoration:none;transition:background var(--nh-duration) var(--nh-ease)}
.nh-infotile--accent{background:var(--nh-accent)}
.nh-infotile:hover{background:var(--nh-accent)}
.nh-infotile__icon{width:22px;height:22px}
.nh-infotile__label{font-family:var(--nh-font-brand);font-weight:var(--nh-weight-bold);font-size:var(--nh-size-body-sm);color:var(--nh-white)}

/* ── ListPanel ────────────────────────────────────────── */
.nh-listpanel{display:flex;flex-direction:column;width:100%;background:var(--nh-panel)}
.nh-listpanel__head{height:var(--nh-control-h);display:flex;align-items:center;padding:0 14px;background:var(--nh-davys-gray);font-family:var(--nh-font-ui);font-weight:var(--nh-weight-heavy);font-size:var(--nh-size-body-sm);color:var(--nh-white)}
.nh-listpanel__head--accent{background:var(--nh-accent)}
.nh-listpanel__body{padding:var(--nh-space-4) 14px;display:flex;flex-direction:column;gap:var(--nh-space-4);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--nh-scrollbar-thumb) var(--nh-scrollbar-track)}
.nh-listpanel__body::-webkit-scrollbar{width:3px}
.nh-listpanel__body::-webkit-scrollbar-track{background:var(--nh-scrollbar-track)}
.nh-listpanel__body::-webkit-scrollbar-thumb{background:var(--nh-scrollbar-thumb)}
.nh-listpanel__item{display:grid;grid-template-columns:10px 1fr;gap:var(--nh-space-2);padding-bottom:var(--nh-space-4);border-bottom:var(--nh-border-hairline)}
.nh-listpanel__item:last-child{border-bottom:0;padding-bottom:0}
.nh-listpanel__pin{width:10px;height:11px;margin-top:2px}
.nh-listpanel__title{font-family:var(--nh-font-ui);font-weight:var(--nh-weight-heavy);font-size:var(--nh-size-body-sm);color:var(--nh-accent)}
.nh-listpanel__text{font-family:var(--nh-font-ui);font-size:var(--nh-size-body-sm);color:var(--nh-text-muted);white-space:pre-line}

/* ── Accordion ────────────────────────────────────────── */
.nh-accordion{display:flex;flex-direction:column;background:var(--nh-white)}
.nh-accordion__item{border:var(--nh-border-subtle);border-bottom:0}
.nh-accordion__item:last-child{border-bottom:var(--nh-border-subtle)}
.nh-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--nh-space-4);width:100%;padding:var(--nh-space-4) var(--nh-space-5);background:none;border:0;cursor:pointer;text-align:left;font-family:var(--nh-font-ui);font-weight:var(--nh-weight-bold);font-size:var(--nh-size-body-sm);color:var(--nh-text-body)}
.nh-accordion__trigger:hover{color:var(--nh-accent)}
.nh-accordion__chevron{width:12px;height:7px;flex:none;transition:transform var(--nh-duration) var(--nh-ease)}
.nh-accordion__chevron path{stroke:var(--nh-accent);stroke-width:1.6;fill:none}
.nh-accordion__item--open .nh-accordion__chevron{transform:rotate(180deg)}
.nh-accordion__panel{padding:0 var(--nh-space-5) var(--nh-space-5);font-family:var(--nh-font-ui);font-size:var(--nh-size-body-sm);color:var(--nh-text-body)}

/* ── CalloutBand ──────────────────────────────────────── */
.nh-band-cta{display:flex;align-items:center;gap:var(--nh-space-16);padding:var(--nh-space-12) var(--nh-space-16);background:var(--nh-accent);color:var(--nh-white)}
.nh-band-cta--dark{background:var(--nh-davys-gray)}
.nh-band-cta--light{background:var(--nh-seasalt);color:var(--nh-text-body)}
.nh-band-cta__title{font-family:var(--nh-font-brand);font-weight:var(--nh-weight-bold);font-size:var(--nh-size-h3);margin:0 0 var(--nh-space-3);color:inherit}
.nh-band-cta__text{font-family:var(--nh-font-ui);font-size:var(--nh-size-body-sm);margin:0;color:inherit}
.nh-band-cta__aside{display:flex;align-items:center;gap:var(--nh-space-4);flex:none}

/* ── ColorSwatch (guide's ds_color symbol) ────────────── */
.nh-swatch{display:flex;flex-direction:column;gap:var(--nh-space-3);width:100%}
.nh-swatch__chip{width:100%;aspect-ratio:239/170;border-radius:var(--nh-radius-swatch)}
.nh-swatch__name{font-family:var(--nh-font-ui);font-weight:var(--nh-weight-bold);font-size:var(--nh-size-body-sm);color:var(--nh-ink)}
.nh-swatch__role{font-family:var(--nh-font-ui);font-size:var(--nh-size-body-sm);color:var(--nh-taupe-gray)}
.nh-swatch__value{font-family:var(--nh-font-ui);font-size:var(--nh-size-body-sm);color:var(--nh-taupe-gray)}