:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
.hnh-site {
  background-color: var(--accent);
color: var(--text-dark);
}
.hnh-main {
  display: block;
}
.hnh-header {
  display: block;
background-color: var(--base);
}
.hnh-header__top {
  padding-block: var(--space-s);
padding-inline: var(--gutter);
}
.hnh-header__inner {
  flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
}
.hnh-header__logo {
  display: block;
flex-shrink: 0;
inline-size: var(--space-xxl);
line-height: 0;

& svg {
  inline-size: 100%;
  block-size: auto;
}

@media (width < 768px) {
  inline-size: var(--space-xl);
}
}
.hnh-header__title {
  flex: 1;
margin: 0;
font-family: var(--heading-font-family);
font-weight: 700;
font-size: calc(var(--h1) * 1.4);
line-height: 1;
text-align: center;
color: var(--accent);

@media (width < 768px) {
  font-size: var(--h2);
  text-align: start;
}
}
.hnh-nav-toggle {
  display: none;
align-items: center;
gap: var(--space-xs);
padding-block: var(--space-xs);
padding-inline: var(--space-s);
background-color: transparent;
border: var(--border-size) solid var(--accent);
border-radius: var(--radius);
color: var(--accent);
font-family: var(--heading-font-family);
font-weight: 700;
font-size: var(--h4);
cursor: pointer;

@media (width < 1024px) {
  display: inline-flex;
}
}
.hnh-nav {
  background-color: var(--base-ultra-light);
padding-inline: var(--gutter);

@media (width < 1024px) {
  display: none;

  &.is-open {
    display: block;
  }
}
}
.hnh-nav__list {
  display: flex;
flex-wrap: wrap;
column-gap: var(--space-m);
row-gap: var(--space-xs);
margin: 0;
padding: 0;
padding-block: var(--space-s);
list-style: none;

& > li {
  max-inline-size: none;
}

@media (width < 1024px) {
  flex-direction: column;
}
}
.hnh-nav__link {
  font-family: var(--heading-font-family);
font-weight: 700;
font-size: var(--h3);
line-height: 1.2;
color: var(--tertiary);
text-decoration: none;

&:hover,
&:focus-visible {
  color: var(--tertiary-dark);
  text-decoration: underline;
}
}
.hnh-footer {
  display: block;
background-color: var(--base);
color: var(--white);
}
.hnh-footer__landscape {
  display: block;
background-color: var(--accent);
line-height: 0;

& svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1440 / 220;
}
}
.hnh-footer__main {
  padding-block: var(--section-space-s);
padding-inline: var(--gutter);
}
.hnh-footer__inner {
  display: grid;
grid-template-columns: var(--grid-2);
gap: var(--grid-gap);
align-items: center;

@media (width < 768px) {
  grid-template-columns: var(--grid-1);
}
}
.hnh-footer__nav {
  display: flex;
flex-direction: column;
gap: var(--space-s);
}
.hnh-footer__links {
  display: flex;
flex-direction: column;
gap: var(--space-xs);
margin: 0;
padding: 0;
list-style: none;

& a {
  color: var(--white);
  text-decoration: none;
}

& a:hover,
& a:focus-visible {
  text-decoration: underline;
}
}
.hnh-footer__social {
  display: flex;
gap: var(--space-s);
}
.hnh-footer__social-link {
  display: block;
inline-size: var(--space-l);
color: var(--white);
line-height: 0;

& svg {
  inline-size: 100%;
  block-size: auto;
}

&:hover,
&:focus-visible {
  color: var(--accent);
}
}
.hnh-footer__card {
  display: flex;
flex-direction: column;
gap: var(--space-s);
padding: var(--space-l);
border: var(--border-size) solid var(--base-light);
border-radius: calc(var(--radius) * 3);
box-shadow: var(--box-shadow-2);
}
.hnh-footer__card-title {
  margin: 0;
font-family: var(--heading-font-family);
font-weight: 700;
font-size: var(--h3);
line-height: 1.1;
color: var(--base-ultra-dark);
}
.hnh-footer__address {
  display: flex;
flex-direction: column;
font-style: normal;

& a {
  color: var(--white);
  text-decoration: none;
}

& a:hover,
& a:focus-visible {
  text-decoration: underline;
}
}
.hnh-footer__bottom {
  padding-block: var(--space-s);
padding-inline: var(--gutter);
background-color: var(--base-ultra-dark);
color: var(--white);
font-size: var(--text-s);
text-align: center;

& p {
  margin: 0;
  max-inline-size: none;
}

& a {
  color: var(--white);
}
}
.hnh-intro__inner {
  display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-l);
inline-size: 100%;
}
.hnh-intro__text {
  display: flex;
flex-direction: column;
gap: var(--space-s);
max-inline-size: var(--width-60);

& p {
  margin: 0;
}
}
.hnh-intro__title {
  margin: 0;
color: var(--base);
}
.hnh-intro__ballon {
  flex-shrink: 0;
inline-size: var(--width-10);
block-size: auto;

@media (width < 768px) {
  display: none;
}
}
.hnh-pre-line {
  white-space: pre-line;
}
.hnh-section__inner {
  gap: var(--space-m);
}
.hnh-section__head {
  display: flex;
flex-direction: column;
gap: var(--space-s);
max-inline-size: var(--width-60);

& p {
  margin: 0;
}
}
.hnh-section-title {
  margin: 0;
font-size: var(--h2);
}
.hnh-section--base {
  background-color: var(--base);
color: var(--white);

& .hnh-section-title {
  color: var(--white);
}
}
.hnh-grid-3 {
  display: grid;
grid-template-columns: var(--grid-auto-3);
gap: var(--grid-gap);
inline-size: 100%;
}
.hnh-grid-2 {
  display: grid;
grid-template-columns: var(--grid-auto-2);
gap: var(--grid-gap);
inline-size: 100%;
}
.hnh-card {
  position: relative;
display: flex;
flex-direction: column;
gap: var(--space-s);
padding: var(--space-m);
background-color: var(--base-ultra-light);
border: calc(var(--border-size) * 3) solid var(--primary-light);
border-radius: calc(var(--radius) * 3);
color: var(--text-dark);

& > * {
  flex-shrink: 0;
}

& :where(p) {
  margin: 0;
}
}
.hnh-card__title {
  margin: 0;
font-size: var(--h3);
line-height: 1.1;
color: var(--text-dark);
}
.hnh-card__title--accent {
  color: var(--primary);
}
.hnh-card__link {
  margin-block-start: auto;
color: var(--primary);
text-decoration: none;

&:hover,
&:focus-visible {
  text-decoration: underline;
}
}
.hnh-card__price {
  display: flex;
align-items: baseline;
gap: var(--space-xs);
margin-block-start: auto;
color: var(--primary);
}
.hnh-card__price-amount {
  font-size: var(--text-xl);
}
.hnh-card__price-unit {
  font-size: var(--text-m);
}
.hnh-card--media {
  flex-direction: row;
gap: 0;
padding: 0;
overflow: hidden;

@media (width < 768px) {
  flex-direction: column;
}
}
.hnh-card__body {
  display: flex;
flex: 1 1 0;
min-inline-size: 0;
flex-direction: column;
gap: var(--space-s);
padding: var(--space-m);

& > * {
  flex-shrink: 0;
}
}
.hnh-card__media {
  position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.hnh-checklist {
  display: flex;
flex-direction: column;
gap: var(--space-xs);
margin: 0;
padding: 0;
list-style: none;

& > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  max-inline-size: none;
}
}
.hnh-checklist__icon {
  flex-shrink: 0;
inline-size: var(--text-m);
block-size: auto;
line-height: 0;

& svg {
  inline-size: 100%;
  block-size: auto;
}
}
.hnh-card__title-link {
  color: inherit;
text-decoration: none;

&::after {
  content: "";
  position: absolute;
  inset: 0;
}

&:hover,
&:focus-visible {
  text-decoration: underline;
}
}
.hnh-card__more {
  margin-block-start: auto;
color: var(--primary);
}
.hnh-card--top {
  flex-direction: column;

& .hnh-card__mediawrap {
  flex-basis: auto;
  aspect-ratio: 4 / 3;
}

& .hnh-card__body {
  flex: 1 0 auto;
}
}
.hnh-review__date {
  margin: 0;
font-family: var(--heading-font-family);
font-weight: 700;
font-size: var(--h3);
line-height: 1.1;
color: var(--primary);
}
.hnh-review__stars {
  color: var(--primary);
font-size: var(--text-l);
letter-spacing: var(--space-xs);
line-height: 1;
}
.hnh-review__name {
  margin-block-start: auto;
font-family: var(--heading-font-family);
font-weight: 700;
font-size: var(--h4);
color: var(--base);
}
.hnh-detail__grid {
  display: grid;
grid-template-columns: var(--grid-2);
gap: var(--grid-gap);
align-items: end;
inline-size: 100%;

@media (width < 768px) {
  grid-template-columns: var(--grid-1);
}
}
.hnh-detail__media {
  padding: var(--space-m);
background-color: var(--neutral-ultra-light);
border-radius: var(--radius);
}
.hnh-detail__img {
  display: block;
inline-size: 100%;
block-size: auto;
}
.hnh-detail__body {
  display: flex;
flex-direction: column;
gap: var(--space-s);

& p {
  margin: 0;
}
}
.hnh-price {
  display: flex;
align-items: baseline;
gap: var(--space-xs);
color: var(--primary);
}
.hnh-gallery {
  display: grid;
grid-template-columns: var(--grid-auto-3);
gap: var(--grid-gap);
inline-size: 100%;
}
.hnh-gallery__img {
  display: block;
inline-size: 100%;
block-size: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: calc(var(--radius) * 3);
}
.hnh-blogcard__footer {
  display: flex;
align-items: center;
gap: var(--space-s);
margin-block-start: auto;
}
.hnh-blogcard__icon {
  inline-size: var(--space-xl);
line-height: 0;

& svg {
  inline-size: 100%;
  block-size: auto;
}
}
.hnh-article {
  gap: var(--space-m);
padding: var(--space-l);
box-shadow: var(--box-shadow-2);
}
.hnh-article__date {
  font-size: var(--text-s);
font-weight: 700;
color: var(--primary-dark);
}
.hnh-card__mediawrap {
  position: relative;
flex: 0 0 40%;
overflow: hidden;

@media (width < 768px) {
  flex-basis: auto;
  aspect-ratio: 4 / 3;
}
}
.hnh-form-slot {
  inline-size: 100%;
}
.hnh-stack {
  display: flex;
flex-direction: column;
gap: var(--grid-gap);
inline-size: 100%;
}
.hnh-hero {
  position: relative;
overflow: hidden;
padding-block: var(--section-space-m);
}
.hnh-hero__bg {
  position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.hnh-hero__inner {
  position: relative;
}
.hnh-hero__card {
  display: flex;
flex-direction: column;
gap: var(--space-s);
max-inline-size: var(--width-40);
padding: var(--space-l);
background-color: color-mix(in oklch, var(--white) 80%, transparent);
border-radius: calc(var(--radius) * 3);

& p {
  margin: 0;
}

@media (width < 768px) {
  max-inline-size: none;
}
}
.hnh-hero__title {
  margin: 0;
color: var(--primary);
text-transform: uppercase;
}
.hnh-home-intro__ballon {
  flex-shrink: 0;
inline-size: var(--width-20);
block-size: auto;

@media (width < 768px) {
  display: none;
}
}
.hnh-slider {
  position: relative;
padding-block: 0;
padding-inline: 0;
}
.hnh-slider__track {
  display: flex;
inline-size: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
margin: 0;
padding: 0;
list-style: none;

&::-webkit-scrollbar {
  display: none;
}
}
.hnh-slide {
  display: grid;
grid-template-columns: var(--grid-2);
flex: 0 0 100%;
max-inline-size: none;
scroll-snap-align: start;

@media (width < 768px) {
  grid-template-columns: var(--grid-1);
}
}
.hnh-slide__img {
  inline-size: 100%;
block-size: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.hnh-slide__panel {
  display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-s);
padding: var(--space-xl);
background-color: var(--base-ultra-light);
text-align: center;

& p {
  margin: 0;
}
}
.hnh-slide__title {
  margin: 0;
font-size: var(--h3);
color: var(--primary);
}
.hnh-slider__arrow {
  position: absolute;
inset-block-start: 50%;
translate: 0 -50%;
display: grid;
place-items: center;
inline-size: var(--space-l);
block-size: var(--space-l);
padding: 0;
border: 0;
background-color: var(--neutral-ultra-dark);
color: var(--white);
font-size: var(--text-l);
line-height: 1;
cursor: pointer;

&:hover,
&:focus-visible {
  background-color: var(--primary);
}
}
.hnh-slider__prev {
  inset-inline-start: 0;
}
.hnh-slider__next {
  inset-inline-end: 0;
}
.hnh-thema__img {
  max-inline-size: var(--width-30);
border-radius: calc(var(--radius) * 3);
}
.hnh-article__img {
  max-inline-size: var(--width-40);
border-radius: calc(var(--radius) * 3);
}
.hnh-form {
  display: flex;
flex-direction: column;
gap: var(--space-m);
inline-size: 100%;
padding: var(--space-l);
border: calc(var(--border-size) * 3) solid var(--primary-light);
border-radius: calc(var(--radius) * 3);

& :where(p) {
  margin: 0;
}

@media (width < 768px) {
  padding: var(--space-m);
}
}
.hnh-form__group {
  display: flex;
flex-direction: column;
gap: var(--space-s);
margin: 0;
padding: 0;
border: 0;
min-inline-size: 0;
}
.hnh-form__legend {
  margin-block-end: var(--space-xs);
padding: 0;
font-family: var(--heading-font-family);
font-weight: 700;
font-size: var(--h4);
line-height: 1.2;
}
.hnh-form__intro {
  font-size: var(--text-s);
}
.hnh-form__row {
  display: grid;
grid-template-columns: var(--grid-auto-2);
gap: var(--space-s);
}
.hnh-form__field {
  display: flex;
flex-direction: column;
gap: var(--space-xs);
min-inline-size: 0;
}
.hnh-form__label {
  font-size: var(--text-s);
font-weight: 600;
}
.hnh-form__input {
  inline-size: 100%;
padding-block: var(--space-xs);
padding-inline: var(--space-s);
border: var(--border-size) solid var(--neutral-light);
border-radius: var(--radius);
background-color: var(--white);
color: var(--text-dark);
font: inherit;

&:focus-visible {
  outline: calc(var(--border-size) * 2) solid var(--primary);
  outline-offset: var(--border-size);
}

&[aria-invalid="true"] {
  border-color: var(--primary-dark);
}
}
.hnh-form__error {
  color: var(--primary-dark);
font-size: var(--text-s);
font-weight: 600;

&:empty {
  display: none;
}
}
.hnh-form__options {
  display: grid;
grid-template-columns: var(--grid-auto-3);
gap: var(--space-xs);
}
.hnh-form__option {
  display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-s);
cursor: pointer;

& input {
  flex-shrink: 0;
  inline-size: var(--text-m);
  block-size: var(--text-m);
  accent-color: var(--primary);
}
}
.hnh-form__summary {
  display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-m);
background-color: var(--base-ultra-light);
border-radius: var(--radius);
}
.hnh-form__total-label {
  font-weight: 600;
}
.hnh-form__total {
  font-family: var(--heading-font-family);
font-weight: 700;
font-size: var(--h3);
line-height: 1.1;
color: var(--primary);
}
.hnh-form__note {
  font-size: var(--text-s);
}
.hnh-form__hp {
  position: absolute;
inline-size: var(--border-size);
block-size: var(--border-size);
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.hnh-form__status {
  font-weight: 600;

&:empty {
  display: none;
}
}
.hnh-form__submit {
  inline-size: 100%;
}
.hnh-form__add {
  align-self: flex-start;
padding: 0;
border: 0;
background-color: transparent;
color: var(--primary-dark);
font: inherit;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
.hnh-pakket-row {
  display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) auto auto;
align-items: end;
gap: var(--space-s);

@media (width < 768px) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.hnh-pakket-row__sub {
  padding-block-end: var(--space-xs);
font-weight: 600;
white-space: nowrap;
}
.hnh-pakket-row__remove {
  padding-block-end: var(--space-xs);
padding-inline: 0;
border: 0;
background-color: transparent;
color: var(--primary-dark);
font: inherit;
font-size: var(--text-s);
text-decoration: underline;
cursor: pointer;
}
.hnh-form__field--full {
  inline-size: 100%;
}